header 的 position: sticky 失效主因是 display: block 与 flex 布局或固定高度冲突，导致浏览器无法识别滚动边界；应设 display: initial，确保父级无 overflow/transform/filter，top 值需适配安全区与业务偏移，检测吸顶优先用 offsetTop 差值法，Safari 旧版需 will-change 或 scroll 监听降级。
为什么 header 里写 position: sticky 没反应？
根本不是 header 标签本身的问题，而是它默认的 display: block 在某些布局上下文中会“拦截” sticky 行为——尤其当它包裹了 flex 子项或自身被设了固定高度时。浏览器无法正确识别其滚动边界，导致 sticky-nav 子元素始终卡在 relative 状态。
常见错误现象：
- 控制台无报错，但导航栏完全不吸顶
- 滚动时导航栏突然跳一下，然后恢复滚动（Safari 典型抖动）
- 在 Chrome 正常，Safari 或 iOS 微信里失效
实操建议：
- 给
header加display: initial，不是block，也不是contents，就是initial—— 它能解除部分浏览器对嵌套 sticky 的隐式限制 - 确保
header的直接父级（比如body）没有overflow: hidden、transform、filter等会创建新层叠上下文的样式 - 如果必须用
flex布局，避免在header上设align-items: stretch，改用flex-start或显式height: auto
top 值设多少才真正生效？
top: 0 是最简起点，但生产环境几乎不能直接用。它表示“元素顶部到达视口顶部时开始吸附”，可现实里页面顶部往往有 banner、iOS 状态栏、弹窗遮罩等占位内容，直接写 top: 0 会导致导航栏被顶出视口、只露半截甚至完全不可见。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先用
top: env(safe-area-inset-top)兼容 iPhone 状态栏，再叠加业务偏移，例如top: calc(env(safe-area-inset-top) + 1rem) - 避免用
rem或vw单独设top，缩放或高 DPI 下易错位；固定像素如top: 48px更可控 - 如果导航栏自身有
margin-top，sticky 不会把它纳入定位基准——改用padding-top，或在外层包一个div承担外边距 - 不要同时设
top和bottom，行为未定义，Chrome 可能忽略top，Safari 可能直接退化为 relative
如何检测是否已吸顶并动态加类？
别用 IntersectionObserver，它在快速滚动时容易漏帧；也别用纯 scroll 监听配 getBoundingClientRect()，计算开销大且受 layout thrashing 影响。最轻量、最稳的方案是基于 offsetTop 差值判断。
实操建议：
- 在 DOM 加载后立刻记录初始
offsetTop：const initialOffset = stickyNav.offsetTop - 监听
scroll，比较当前offsetTop是否大于初始值：if (stickyNav.offsetTop > initialOffset)→ 已吸顶 - 这个差值变化是 sticky 引擎内部触发的可靠信号，比任何坐标计算都精准，且零依赖
- 注意：该方法要求
stickyNav必须已渲染、未被display: none或visibility: hidden隐藏
Safari 旧版和 iOS 软键盘场景怎么兜底？
iOS Safari 15.4 之前存在经典 bug：当页面有 transform、perspective 或 filter 时，sticky 元素可能滚动到某位置后直接消失；更糟的是，软键盘唤起后重绘，sticky 状态丢失且不再恢复。
实操建议：
- 临时规避：给
stickyNav的父容器加will-change: transform，或transform: translateZ(0) - 稳妥降级：用 UA 检测
navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')，命中则改用 scroll 监听 +classList.toggle('isSticky')模拟 - 关键点：降级逻辑必须在
DOMContentLoaded后立即注册，不能等load，否则首屏滚动就错过时机 - 测试重点不是“能不能吸顶”，而是“软键盘收起后是否自动恢复吸顶状态”——这是多数人忽略的崩溃点
