滚动吸顶 Sticky Header
元素滚动到视口边缘后钉住不动，直到被下一个顶替
↓ 滚动，观察标题吸顶
第一章 · 吸顶标题
正文内容。滚动时标题到达顶部后会"粘"在那里，直到本章结束。
第二章 · 吸顶标题
第二个章节标题把第一个顶下去，自己接着吸顶。
**滚动吸顶（Sticky Header）**由 position: sticky 实现：元素正常随页面滚动，一旦其边缘碰到视口指定的吸附位（通常是 top: 0），就被“钉”在那里随页面移动，直到滚出父容器范围。常见形态是章节标题链：第一个标题吸顶，第二个标题滚上来把它顶走，自己接着吸。
什么时候用：长文档的章节标题、表格的表头（横向滚动时列头吸顶）、全局导航栏。它解决的是“我在哪一节”的定位问题。
对 AI 说清楚的三要素：① 吸附边与阈值（top: 0 或 top: 64px 让位全局导航）；② 吸附态样式（背景色 + 底部分隔线，否则下层文字会穿透）；③ 父容器边界（sticky 只在父元素范围内生效，这决定了“顶替”行为）。
复制即用的提示词片段
章节标题滚动吸顶（Sticky Header）：position: sticky; top: 0， 滚出父容器前保持吸附，下一个章节标题到达时将其自然顶替； 吸附时加底部 1px 分隔线与背景色，避免文字穿透。