position: sticky 在导航栏上不生效，主因是父容器 overflow 属性中断粘性行为、未设置 top 值、flex 布局干扰、top 值计算不当、margin-top 不参与定位基准，以及 Safari 中 transform 等合成属性触发的 WebKit bug。
为什么 position: sticky 在导航栏上不生效？
多数情况不是属性写错了，而是父容器或文档结构拦住了它。sticky 的触发依赖「滚动容器边界」，只要父元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll，sticky 就会失效——哪怕只是 body 上加了 overflow-x: hidden 也会中断粘性行为。
- 检查所有祖先元素的
overflow值，包括html和body -
sticky必须配合top（或bottom）值才起作用，只写position: sticky是无效的 - 若导航栏在 flex 容器中，确保父 flex 容器没设
align-items: stretch以外的值干扰高度计算
top 值设多少才合适？
不能直接写 top: 0 就完事。如果页面顶部有 banner、通知条或移动端状态栏占位，导航栏会被顶下去，出现“卡半截”现象。真实场景中，top 应该等于导航栏进入视口前需要被“挤上去”的距离。
- 常见做法：用
top: env(safe-area-inset-top)兼容 iOS 状态栏；再叠加top: 1rem这类业务偏移 - 多层嵌套时，优先用相对单位（如
top: 48px），避免 rem/vw 在缩放或高 DPI 下错位 - 如果导航栏本身有
margin-top，sticky 不会把它算进定位基准——得改用padding-top或包裹一层容器
移动端 Safari 里 sticky 导航栏突然消失？
这是 WebKit 的经典 bug：当页面存在 transform、perspective 或 filter 等合成层触发属性时，sticky 元素可能被强制脱离文档流，表现为滚动到某位置后直接“隐身”。
- 临时规避：给导航栏父容器加
will-change: transform，或改用transform: translateZ(0) - 更稳妥方案：检测
userAgent包含Safari且无Chrome，降级为 JS 监听scroll+classList.toggle模拟 sticky - 注意：iOS 15.4+ 修复了部分场景，但
input聚焦唤起软键盘后仍可能触发重绘丢失
sticky 的真正难点不在写法，而在它和页面其他 CSS 特性的隐式耦合——比如一个 backdrop-filter: blur(10px) 可能就让整个导航栏失粘，而错误控制台里什么都不会报。
立即学习“前端免费学习笔记（深入）”；
