LAYOUT
粘性侧栏Sticky Sidebar
左栏固定在视口上不动，右栏内容继续滚动——浏览长文时关键信息始终可见。
效果预览
¥128,400
本月收入（固定不动）
+12.4%
适合用在哪
文档页、结账页（订单摘要固定）、长表单、文章 + 目录。
容易踩的坑
- 祖先元素设置了 overflow:hidden 或 overflow:auto，sticky 完全失效。
- 侧栏内容高于视口时底部永远看不到，需给侧栏加 max-height 和内部滚动。
- top 值写死 96px，吸顶导航在移动端高度变化后侧栏被遮或留出空隙。
设计提示词 · Prompt
粘性侧栏（Sticky Sidebar）：外层 CSS Grid 两栏（侧栏 280-320px + 内容自适应，gap 48px），侧栏加 position:sticky; top:96px（避开吸顶导航）+ align-self:start（关键，没有它 sticky 不生效）。侧栏内容：结账页放订单摘要、文档页放目录、博客页放作者卡。右栏正常滚动。移动端（<768px）侧栏取消 sticky 改为正常流。侧栏卡片用白底 + 1px 描边 + 16px 圆角 + 轻投影，视觉上比内容区"浮"半层。
Sticky Sidebar: an outer two-column CSS Grid (sidebar 280-320px + fluid content, gap 48px), with the sidebar set to position:sticky; top:96px (to clear the sticky header) + align-self:start (key — without it sticky won't work). Sidebar content: an order summary on checkout pages, a TOC on docs pages, an author card on blog pages. The right column scrolls normally. On mobile (<768px), drop sticky on the sidebar and return it to normal flow. Style the sidebar card with a white background + 1px stroke + 16px radius + light shadow, so it visually "floats" half a layer above the content area.
常见搭配
同一页面里经常和「粘性侧栏」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-sticky">
<div class="d-sticky__side">
<b>¥128,400</b>
<span>本月收入（固定不动）</span>
<span class="d-badge d-badge--g">+12.4%</span>
</div>
<div class="d-sticky__main">
<span class="d-sticky__ln" style="width:94%"></span>
<span class="d-sticky__ln" style="width:86%"></span>
<div class="d-img d-img--cool" style="height:30px"></div>
<span class="d-sticky__ln" style="width:76%"></span>
<span class="d-sticky__ln" style="width:64%"></span>
</div>
</div>