吸顶
Sticky
中级通用吸顶（Sticky）是一种 CSS 定位效果：元素平时留在页面布局中，滚动到设定位置后会贴住滚动区域的顶部。它解决的是长内容里关键操作或导航滚出视线的问题，比如让后台表格的表头在查看下方数据时仍然可见。
你可能会说：「后台表格往下滚时，我想让表头留在上面，滚回去后又回到原来的位置。」
动手看看订单表格的吸顶表头
在表格里向下滚动：表头原本跟着内容走，到达设定的顶部位置后就会停住，让你查看后面的订单时仍能认出各列。
注意刚打开时表头还在原来的位置：sticky 不会立刻把它挪到顶部，只有滚动到临界位置才开始贴住。
要点吸顶为什么能跟着滚动，又不会一直固定？
- 1
先在原位，滚到阈值再贴住
你可以把吸顶理解为有触发位置的定位。元素起初在原来的布局位置；滚动使它接近顶部阈值时，它才贴住。常见写法是设置 position: sticky 和 top: 0，少了顶部阈值就达不到预期的吸顶效果。
- 2
贴住的位置取决于滚动区域
吸顶参照的是相关的滚动容器，不一定是整个浏览器窗口。比如后台页面里只有表格区域能滚动，表头就可以贴在这块区域的顶部。让 AI 实现时，你最好说清楚究竟是谁在滚动。
- 3
离开所属区域后也会结束
吸顶元素仍受所属布局区域约束，不会无限跟着页面走。比如文章每章各有一个小标题，标题可以在阅读本章时贴住顶部；滚过这一章后，它会让位给后面的内容。这也能避免多个标题一直堆在屏幕上。
容易混淆的地方
吸顶和固定定位都可能让元素停在屏幕上方，但固定定位通常脱离原来的布局位置，并持续相对视口停留；吸顶起初占着原位，滚到阈值才贴住，还会受到所属区域限制。普通定位则不会因为滚动到某个位置而切换成贴住状态。
什么时候用
适合用
- 做后台长表格时，让表头随表格区域滚动而吸顶，方便你对照下方数据和列名。
- 做长文章时，让当前章节标题吸顶，读者往下看仍知道自己读到哪一节。
- 做商品详情页时，让分类导航滚过原位后吸顶，方便用户切换内容区。
不适合用
- 网站主导航从打开页面起就要一直停在视口顶部时，用固定定位更直接。
- 用户点击目录后只需要跳到文章某一节时，用锚点导航，不需要让标题吸顶。
- 内容区很短、不会发生滚动时，保留普通布局即可，吸顶没有发挥作用的机会。
练一练选一个答案，看看解释
一个后台页面左侧是菜单，右侧有可独立滚动的长表格。你希望表头只在表格滚动时贴住表格区域顶部，滚到表格末尾后也不跑出表格。该怎么向 AI 描述？
让 AI 帮你做复制给 AI Agent 直接用
请让后台表格的表头使用吸顶效果：表格内容在右侧区域内独立滚动，表头滚到该区域顶部后贴住，离开表格范围后不再停留。请确认滚动容器和顶部偏移，并检查表头不会遮挡首行数据。