iOS Safari 中 sticky 不生效的根本原因是其要求 sticky 元素必须位于明确可滚动且有高度约束的父容器内，而非依赖 body 滚动；需用全高包裹层（如 height: 100vh; overflow-y: scroll）并避免 transform 等切断滚动上下文的属性。
移动端用 position: sticky 实现吸顶，最常遇到的不是“怎么写”，而是“写了却不生效”——尤其在 iOS Safari 上。根本原因不是语法错，而是 sticky 依赖滚动上下文，而移动端页面结构天然容易破坏它。
为什么 sticky 在 iOS Safari 里经常不触发
因为 iOS Safari（特别是 15.3 及更早）对 body 或 html 作为滚动容器时的 sticky 支持极差：它会直接忽略 top: 0，甚至让元素退化为 static。这不是 bug，是渲染引擎的设计限制——它要求 sticky 元素必须挂在一个「明确可滚动、有高度约束」的父容器下，而不是靠 body 滚动来驱动。
- 检查 computed 样式中
position是否真为sticky，若显示static，说明已被浏览器降级 - 不要只看
@supports (position: sticky)，iOS 15.2–15.3 虽返回 true，但行为不可靠 -
body { overflow: hidden }或任何祖先设了overflow: auto/scroll都会截断滚动上下文，sticky 直接失效
必须设置的父容器条件
sticky 不是“固定在视口”，而是“粘在最近的可滚动祖先容器的边界上”。所以你得亲手造一个可靠的滚动容器，不能指望默认 body。
- 用一个全高包裹层，例如
<div id="app">，设height: 100vh; overflow-y: scroll; - 同时加
body { overflow: hidden; }，防止双滚动条干扰 - 确保该容器有明确高度（
height或max-height），不能是min-height单独撑开 - 避免在该容器或其任意祖先上使用
transform、filter、will-change，它们会创建新层叠上下文，切断 sticky 链路
兼容旧 iOS 的最小可行降级方案
当目标必须覆盖 iOS 13–14 或部分安卓 WebView 时，纯 CSS 已不可靠，需 JS 补偿，但不必重写整套逻辑。
立即学习“前端免费学习笔记（深入）”；
- 监听
IntersectionObserver，观察吸顶元素的getBoundingClientRect().top是否 ≤ 0，比scroll事件更准、无延迟 - 触发后只切换 class：
.is-stuck { position: fixed; top: 0; width: 100%; }，而非直接改style.position - 同步给下一个兄弟元素加
margin-top（值 = 导航栏高度），否则页面内容会上蹿 - 别用
top: 0+left: 0强制 fixed 定位——它会脱离宽度上下文，在横屏或缩放时错位
容易被忽略的细节：z-index 和占位
sticky 元素吸顶后仍保留在文档流中，但视觉上“浮起”，这导致两个隐性问题：遮挡和定位错乱。
- 必须设
z-index（如z-index: 1000），否则可能被后续div的背景盖住，尤其在 flex/grid 布局中 - 下方内容不会自动下移，要手动加
padding-top或margin-top补偿；若导航栏高度响应式变化，用calc(60px + env(safe-area-inset-top))比 JS 计算更稳 - 在 flex 容器中，sticky 元素的
align-self默认可能是center，导致视觉偏移，显式设为flex-start更安全
真正难的不是让 sticky “动起来”，而是让它在各种嵌套、滚动、缩放、横竖屏切换下始终对齐边界。一旦父容器滚动上下文不稳定，所有 top 值、z-index、补偿 margin 都会失效——所以优先花时间理清滚动链路，而不是堆 CSS 属性。
