长文第 1 段：目录先占据正常位置。
长文第 2 段：滚过它的原始位置才开始吸附。
长文第 3 段：文章结束时不能粘到下一篇。
产品与设计 · 布局基础
吸顶Sticky
Sticky 先在文档流中排版，再在阈值处吸附；它始终受自己的滚动容器和父级边界约束。
让长文目录在正确边界内吸附
先触发错误的裁切容器，再恢复并滚过阈值；观察目录卡本身的流内、吸附和受限状态。
阅读器预览任务：下滑后仍能看到本章目录
先读默认状态：目录还在流内，不是 fixed。
从目录的三种状态读规则
- 开始：sticky 先占普通流的位置，不等于 fixed。
- 阈值：滚到
top后才吸附；面板里的目录显示 top:12px。 - 边界：最近滚动祖先决定可吸附范围；overflow 意外出现会让它提前停止。
什么时候用，怎么用
长目录、筛选条、结账摘要需要在同一区块滚动时仍可达可用；全局悬浮按钮或跨页面工具栏不要假装 sticky。
- 确认真实滚动容器与 sticky 元素的父级边界。
- 设置可解释的 top，并留出固定头部高度。
- 滚到文章尾部与窄屏，确认它不遮主内容也不会越界。
正反例：同一篇文章
滚过阈值才吸附，文章结束后自然离开。
目录被看似无关的裁切父级限制，长文中途就失去导航。
快速自测
目录没有吸顶，先检查什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。