position: sticky不生效主因是祖先元素overflow:hidden/auto/scroll截断粘性链，或flex/grid父容器无显式高度、transform/filter创建新层叠上下文；需用devtools逐级检查computed overflow与transform值。
position: sticky 能直接实现吸顶，但绝大多数失效不是写错了，而是被某层父容器悄悄截断了。
为什么 position: sticky 不生效？
它不是“写了就粘”，而是一套依赖祖先节点状态的定位机制。最常踩的坑是：
- 任意一层祖先设置了
overflow: hidden、overflow: auto或overflow: scroll—— 这会创建新的“粘性边界”，sticky只在该边界内生效，一滚动就消失 - 祖先容器没设明确高度（比如
height: auto且子元素没撑开），导致粘性计算无参考基准 - 导航栏自身或某层父元素用了
transform、filter或will-change—— 这些会强制创建新层叠上下文并禁用 sticky - 在 Flex/Grid 容器中，父项设了
align-items: stretch但没给导航栏设min-height，导致高度计算异常
top 值设多少才对？
top 不是“离页面顶部多少像素”，而是“离它原本位置顶部多少像素才开始吸附”。常见场景：
- 设为
top: 0：元素一滚到视口顶部就立刻吸顶 - 设为
top: 20px：元素上边缘距离视口顶部还有 20px 时就开始固定 - 如果上面有 header（比如 logo 区），且希望导航栏紧贴 header 下方吸顶，那就设
top: 80px（假设 header 高 80px）
注意：top 必须带单位（px、rem 等），不能只写 top: 0 却漏掉单位（虽然 0 可省略单位，但习惯上仍写 0）。
兼容性和降级怎么处理？
position: sticky 在 IE 中完全不支持，Android 4.4 及更早版本也无效。不能只靠 CSS fallback。
- 先用
CSS.supports('position', 'sticky')检测，返回false时走 JS 方案 - JS 方案必须监听
scroll和resize，用getBoundingClientRect().top判断是否到达临界点 - 切记：用
position: fixed替代时，必须同步给body加padding-top（值 = 导航栏高度），否则内容会上移遮挡 - 如果导航栏高度动态变化（如响应式折叠），JS 里得重新计算临界值，不能只存死数字
真正难的不是那行 position: sticky，而是它被哪一层看不见的 overflow: hidden 给关进了小黑屋——建议用浏览器开发者工具逐层检查祖先节点的 computed styles，重点看 overflow 和 transform。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
