根本原因是position: sticky依赖最近的可滚动祖先容器，若父元素overflow: hidden或height不足，则退化为relative；需检查computed中position值并逐级排查overflow、transform及高度设置。
position: sticky 为什么加了 top: 0 还不吸顶
根本不是代码写错了，而是它没“可依附的滚动容器”。position: sticky 不是全局固定，它只在**最近的、具备滚动能力的祖先容器内**生效。如果导航栏父元素是 div { height: 100vh; overflow: hidden; }，那它连滚动都不存在，sticky 直接退化为 position: relative。
常见失效点：
- 父容器设了
overflow: hidden、overflow: auto但内容没溢出（高度不够） - 父容器用了
transform、filter或will-change，意外创建新层叠上下文 - 导航栏嵌在
display: flex或display: grid容器里，且该容器未设高度或未触发滚动 - 在 iOS Safari ≤15.4 中，
sticky放在body直接子元素上可能完全不触发
快速验证：打开 DevTools → Elements → 选中导航栏 → 看 Computed 面板里的 position 值。如果是 sticky 但没粘住，八成是滚动上下文断了。
nav 元素上直接写 sticky 会出问题吗
会，尤其当它被包在 <header></header> 里时。<header></header> 常带 margin-bottom 或 padding-bottom，而 top: 0 是从元素 border box 顶部算起的——视觉位置和计算位置就错开了，导致“提前吸顶”或“吸顶后留白”。
更稳妥的做法：
- 把
position: sticky和top: 0加到<nav></nav>或内部的<ul></ul>上，而不是外层<header></header> - 避免在 sticky 元素的父级上设
padding或margin；如需间距，改用margin-top加在 sticky 元素下方第一个内容块上 - 确认
box-sizing: border-box已启用，否则边框/内边距会影响top偏移精度
大屏用 sticky、小屏切 fixed 怎么不翻车
不能只靠 @media 改 position，否则 top、left、z-index 会继承冲突，小屏下导航栏可能偏移或被遮盖。
必须显式重置关键属性：
- 小屏下写
top: auto; left: auto;，否则大屏的top: 0仍参与布局计算 -
position: fixed时补全left: 0; right: 0; width: 100%;，不然可能宽度塌陷 - 统一设
z-index: 100（别用 1000+），避免和弹窗、Toast 等组件层级打架 - 若侧边菜单在小屏下可滚动，加
max-height: 200px; overflow-y: auto;，防止撑爆 viewport
另外，fixed 状态下务必加 transform: translateZ(0) 或 will-change: transform，否则 iOS Safari 可能渲染闪烁。
IE11 或旧版安卓 WebView 怎么降级
IE11 完全不支持 position: sticky，多数安卓 4.x WebView（如微信 X5 内核）也缺失。纯 CSS 降级只能 fallback 到 position: relative，毫无固定效果。
真实可用的降级方案是 JS 补偿：
- 监听
scroll，判断window.scrollY >= nav.offsetTop - 到达临界点后切换 class，例如
nav.classList.add('nav-fixed') - CSS 里定义
.nav-fixed { position: fixed; top: 0; left: 0; right: 0; } - 记得给
.nav-fixed加background-color和z-index，否则文字会被后续内容盖住
最麻烦的从来不是加那几行 JS，而是 fixed 状态下子元素的 margin、line-height、transform 在不同设备上表现不一致——这些细节不会报错，但会让点击热区偏移、文字截断、hover 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
