iOS Safari 15.4前不支持sticky在html/body上生效，且需明确高度和溢出限制的父容器作为滚动上下文；安卓Chrome兼容性较好，但iOS对祖先链要求更严，flex/grid父容器未设align-items会中断粘性行为。
sticky定位在移动端失效的常见原因
直接说结论：iOS Safari 15.4 之前版本不支持 position: sticky 在 body 或 html 根元素上生效，且必须配合有明确高度/溢出限制的父容器才能触发粘性行为。
很多人写完 position: sticky; top: 0; 发现导航栏该滚还是滚，根本“不粘”，问题往往不在 CSS 写法本身，而在滚动上下文缺失：
-
sticky不是“全局悬浮”，它只在**最近的、具有滚动能力的祖先容器内生效**；如果整个页面靠body滚动，而body没设height或overflow-y，iOS 就不认这个滚动上下文 - 安卓 Chrome 通常 OK，但 iOS Safari（尤其旧版）对
sticky的祖先链要求更严：父级不能是display: flex或display: grid且未设align-items，否则会中断粘性流 -
top值必须是具体长度（如top: 0），不能是百分比或auto
让 sticky 在 iOS 和安卓都稳定工作的最小配置
别碰 html 和 body 的 position，而是把滚动容器“收窄”到一个可控的 wrapper 元素里，强制建立 sticky 上下文：
HTML 结构示例：
立即学习“前端免费学习笔记（深入）”；
<div class="scroll-container"> <header class="nav-bar">导航栏</header> <main class="content">页面内容...</main> </div>
CSS 关键点：
-
.scroll-container必须设height: 100vh; overflow-y: auto;（不是scroll），这是 iOS Safari 认可的滚动上下文 -
.nav-bar设position: sticky; top: 0; z-index: 100;，并确保它没有transform、filter或will-change—— 这些会创建新层叠上下文并干扰 sticky - 避免给
.scroll-container加display: flex同时又没设flex-direction: column和align-items，容易导致 iOS 忽略 sticky
替代方案：当 sticky 真的不可用时怎么兜底
如果你必须兼容 iOS 13–15.3 或某些 WebView（比如微信内置浏览器），position: sticky 就是不可靠的。这时候别硬扛，用 position: fixed + JS 监听滚动是最稳的降级路径：
- 用
getBoundingClientRect().top判断导航栏是否将要滚出视口顶部，而不是监听window.scrollY—— 移动端 scroll 事件可能被节流或延迟 - 切换类名控制
fixed状态，而非直接改style.position，避免重排抖动 - 注意 fixed 元素会脱离文档流，下方内容需预留
padding-top或用margin-top补位，否则内容会上蹿 - 别忘了加
touch-action: manipulation;到导航栏，减少 iOS 上的点击延迟
为什么不用 IntersectionObserver 做 sticky 检测
看起来很美，但实际踩坑多：IntersectionObserver 在 iOS Safari 中对 rootMargin 的解析不稳定，尤其当 root 是内部容器而非 document 时，isIntersecting 可能始终为 false 或跳变。
更现实的问题是性能：每帧都靠 IO 回调去 toggle fixed 状态，在低端安卓机上容易掉帧；而基于 requestAnimationFrame + getBoundingClientRect 的手动判断，可控性更强、触发时机更准。
真正复杂的是滚动方向识别和快速回滚场景下的状态同步——比如用户猛往上拉，导航栏刚 fixed 又立刻要 un-fixed，这里容易出现一帧错位。这种细节，光靠 CSS 是盖不住的。
