ios safari 中 sticky 失效主因是祖先元素 overflow 属性或 flex/grid 父容器干扰，非写法错误；需避免 overflow: hidden/auto/scroll、改用 clip-path、设 align-items: flex-start 或显式滚动容器，并优先考虑 intersectionobserver 替代方案。
移动端 sticky 失效，八成不是写法错，而是被某个祖先元素静默禁用了——iOS Safari 对 sticky 的限制比你想象中更硬。
为什么 iOS Safari 里 sticky 突然不粘了
不是 bug，是规范行为：只要 sticky 元素路径上任意一个祖先（包括 scroll-view、Modal 包裹器、卡片容器）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该容器本身没产生实际滚动（比如高度固定、内容未溢出），sticky 就会直接退化为 static。DevTools 里看到的 computed position 是 static，不是“没生效”，是被强制关掉了。
实操建议：
- 临时删掉可疑祖先的
overflow声明，看是否恢复 - 必须保留裁剪效果时，用
clip-path: inset(0)替代overflow: hidden，它不影响包含块和粘性行为 - 微信小程序里
scroll-view默认带overflow: auto，别直接往里面塞position: sticky元素
flex/grid 父容器里 sticky 不工作
sticky 元素的直接父级如果是 display: flex 或 display: grid，Safari 对“可滚动区域”的判断更苛刻：它需要明确的主轴滚动空间 + 稳定的基线参考，否则会因对齐方式或高度计算偏差导致失效。
实操建议：
- 给 flex 父容器加
align-items: flex-start（避免baseline或stretch干扰“进入视口”的判断） - 显式设
height或max-height+overflow-y: auto，让它成为真正可滚动的容器；只写min-height: 100vh不够，Safari 可能仍不认 - 避免
inline-flex或inline-grid——inline 级容器不产生 BFC，sticky 直接失效 - 慎用
transform、filter、will-change，它们会创建新层叠上下文，让 sticky 参考系变成变换后的容器，而不是视口
为什么滚动到底部 sticky 就消失
不是 bug，是它本来就不该粘那么远。sticky 只在“滚动范围内”生效。当内容太短、或 sticky 元素自身高度 + 距离底部距离小于 top 值时，它会在到达边界时停止，看起来像“卡住”或“消失”。这在 iOS 上尤其明显，因为橡皮筋滚动会让元素短暂超出正常滚动范围，触发边界截断。
实操建议：
- 检查 sticky 元素的直接包含块是否设了
height: 100vh—— 这会强制截断滚动上下文，改用min-height: 100vh - 确保该容器本身是页面实际滚动的主体（即外层没被其他
overflow截断） - 如果用了 Grid 或 Flex 布局，注意不要给 sticky 元素的兄弟项加
height: 100%，它可能挤压包含块高度计算
什么时候该放弃 sticky，改用 IntersectionObserver
当样式层反复调试无效，或者需要更精细控制（比如只在某段区域粘住、带滚动回弹），直接用 JS 更可靠。尤其在关键导航栏场景，CSS 层的脆弱性已经不值得赌。
轻量方案示例：
const el = document.querySelector('.nav');
const observer = new IntersectionObserver(
([e]) => {
el.classList.toggle('is-sticky', e.intersectionRatio
<p>注意：<code>rootMargin</code> 设为负的下边距，是为了让触发点提前；<code>intersectionRatio</code> 表示元素开始出视口，此时开启粘性类。</p>
<p>最常被忽略的一点：sticky 的失效往往不是单点问题，而是多个条件叠加的结果——比如父容器 <code>overflow: auto</code> + <code>transform: translateZ(0)</code> + <code>flex</code> 对齐未调，三者同时存在时，连 DevTools 都很难一眼定位根因。</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
