根本原因是ios safari对body/html滚动+sticky支持差，且父容器的overflow非visible、无高度约束、存在transform/filter等会切断粘性上下文；应将滚动移至内部div并手动占位。
为什么position: sticky在iOS Safari里经常不生效
根本原因不是你写错了position: sticky，而是它依赖「最近的可滚动祖先」，而iOS Safari（尤其15.3及更早）对body或html滚动+sticky的支持极差。更常见的是：父容器设了overflow: hidden、transform、filter或will-change，直接切断了粘性上下文。
- 检查吸顶元素的直系父容器——它的
overflow必须是visible（默认值），不能是auto、scroll或hidden - 父容器要有明确高度约束，比如
max-height: 60vh或height: 100vh，不能靠内容撑开且无滚动限制 -
top: 0必须显式声明，不能用inset: 0或margin-top替代 - 避免在吸顶元素或其任意祖先上使用
transform、perspective、filter——它们会创建新层叠上下文，让sticky“失联”
怎么写才能在iOS各版本都稳定吸顶
核心策略是：把滚动容器从body移到内部一个div，让sticky绑定到这个可控容器上。
- 给根容器（如
#app）设height: 100vh; overflow-y: scroll; - 同时加
body { overflow: hidden; }，防止双滚动条 - 吸顶元素放在这个
#app内，而非直接子元素于body - 为兼容旧版iOS，保留
position: -webkit-sticky（虽非必需，但部分WebView仍需） - 加上
backface-visibility: hidden到吸顶元素，强制硬件加速，减少软键盘弹出时的错位
吸顶后内容被遮住怎么办
这不是bug，是sticky的设计行为：它仍占据原始文档流位置，只是视觉上“浮起”。下方内容不会自动下移，所以必须手动占位。
- 给紧接在吸顶元素后面的元素加
margin-top，值等于导航栏高度（如margin-top: 44px） - 如果高度不固定（比如多行文字、响应式折叠），改用
padding-top+box-sizing: border-box更稳 - 慎用
calc(44px + env(safe-area-inset-top))——iOS Safari对混合单位解析不稳定；应单独处理安全区：
.navbar {
position: sticky;
top: 0;
padding-top: env(safe-area-inset-top);
padding-top: constant(safe-area-inset-top); /* iOS <p>注意：<code><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"></code>必须存在，否则<code>env()</code>恒为0。</p><h3>要不要降级到JavaScript方案</h3><p>只在必须支持iOS 13–15.3且无法控制滚动容器结构时才考虑。但JS方案真正难搞的不是监听滚动，而是同步处理安全区、软键盘、动态高度和低端Android的节流问题。</p>
- 用
CSS.supports('position', 'sticky')检测，返回false再启用JS逻辑 - 不要直接切
position: fixed——必须插入占位div，高度取el.offsetHeight，否则内容会上跳 - 避免用
scrollTop判断，改用getBoundingClientRect().top ，更可靠 - 若导航栏高度会变（如折叠菜单），resize后必须重新计算占位高度，否则错位
真正容易被忽略的点是：问题往往不在导航栏本身，而在它上面第三层的overflow: hidden容器里——得一层层往上查，而不是反复调top值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
