导航怎么钉住（怎么选）Sticky vs Fixed
先看怎么选
你想让导航或工具条在滚动时留在眼前。先问它属于哪块内容、要不要占页面空间，以及它应该在哪个边界停下；选错的代价是内容被盖住、页脚永远碰不到，或 sticky 看起来根本没生效。
朱批跟着某个内容区、到边界就停 → Sticky；无论页面滚到哪里都要贴住视口 → Fixed，并给正文预留空间。
粘性定位
元素先按正常文档流排版，滚动到阈值后在指定方向“粘”住，直到它的父容器边界离开视口。
- 适合
- 章节导航、表格表头、内容区工具条等，它们只需要在所属内容还可见时保持可达。
- 不适合
- 元素必须跨越多个容器、覆盖整个页面，或祖先有会裁剪滚动的 overflow 导致边界不可预期时。
实现细节与 Prompt
- web
- position: sticky; top: 0; z-index
- 前提
- 滚动祖先边界明确；祖先不要随意 overflow: hidden
- 布局
- 仍占文档流空间，不需要额外 padding 防遮挡
Make the section navigation sticky within its article container: use position: sticky with a top offset below the site header, keep it in normal document flow, stop it at the container boundary, and verify that no ancestor overflow rule breaks the sticky constraint.固定定位
元素脱离文档流，直接相对浏览器视口定位；页面滚动、父容器内容变化时，它仍停在同一个视口坐标。
- 适合
- 全局 Header、返回顶部、客服入口或必须随时可用的全局工具，不属于某一段内容的生命周期。
- 不适合
- 只是想让一段文章的局部导航保持可见，或页面需要自然滚到 footer 时；固定元素会占据视线并可能遮住内容。
实现细节与 Prompt
- web
- position: fixed; inset-block-start: 0; z-index
- 布局
- 正文预留对应 padding / margin，处理刘海屏 safe-area
- 性能
- 谨慎叠加 backdrop-filter 与大面积重绘
Pin the global header to the viewport with position: fixed and a deliberate z-index. Add equivalent top padding to the page content so the header never covers the first heading, account for env(safe-area-inset-top), and keep focus order and skip links usable.详细说明
“钉住”不是一个视觉效果，而是一个边界问题。sticky 仍属于原来的内容区，fixed 则属于视口；先画出边界，再决定 CSS 定位方式。
先看它要跟谁走
问三个问题就够了：
- 元素是否属于某个章节、表格或文章？
- 它离开这个容器后，是否应该消失？
- 它是否必须在整站任何位置都可用？
前两个问题回答“是”，通常选 sticky；最后一个回答“是”，才考虑 fixed。如果只是希望 Header 在阅读时保留，先试 sticky，页面结构会更自然。
Sticky 的边界来自父容器
sticky 的元素先占着自己的位置，滚动到 top 阈值才停止移动。它不会穿过父容器的底部，所以章节导航会在章节结束时一起离开。这个特性让多个章节可以各自拥有导航，也不会把页脚挡住。
它最常见的失效原因不是浏览器不支持，而是滚动边界被改写了：祖先设置了 overflow: hidden、没有可用高度，或 sticky 元素在 flex/grid 中没有足够的可滚动空间。调试时从最近的滚动祖先往上检查，比不断增加 z-index 有效。
Fixed 要为脱离文档流付费
fixed 脱离文档流后，后面的内容不会自动为它让位。页面必须显式预留高度，否则首段标题会被 Header 覆盖；移动端还要把 env(safe-area-inset-top) 算进偏移。全局 fixed 元素也应该有清晰的关闭、跳过或折叠策略，不能让它变成永久遮挡层。
常见翻车
- 把文章内导航做成 fixed，滚出文章后它仍盖着 footer。
- Header fixed 但没有
padding-top，刷新后第一行内容藏在 Header 下。 - 给 sticky 的祖先统一加
overflow: hidden，导致粘性阈值失效。 - 只调大
z-index，却没有处理键盘焦点、跳过链接和缩放后的遮挡。 - 同时堆多个 fixed 工具条，却没有计算总高度，移动端可视区域被吃光。
给 agent 时要说清楚
说明定位对象的边界（视口还是某个内容容器）、Header 实际高度、滚动祖先、正文预留空间和移动端 safe-area。只说“做一个固定导航”会让 agent 在 sticky 与 fixed 之间随意猜，最后只能靠截图返工。