移动端sticky失效主因是祖先元素overflow:hidden/auto/scroll静默禁用，使其退化为static；需逐级检查computed overflow值，用clip-path:inset(0)替代或提升dom层级修复。
移动端 sticky 失效，90% 不是写法错，而是被祖先元素静默禁用——iOS Safari 和部分安卓 WebView 会直接把 position: sticky 降级为 static，连“尝试粘一下”都不会发生。
检查祖先元素的 overflow 是否静默拦截
sticky 必须锚定在“真正可滚动”的容器上。只要路径上任意一层祖先（哪怕隔了三层）设置了 overflow: hidden、overflow: auto 或 overflow: scroll，且该容器自身没实际滚动（比如高度固定、内容没撑开），sticky 就会被强制关掉。
- 用 DevTools 选中 sticky 元素 → 切到「Computed」面板 → 看
position值是不是static - 逐级点击左侧 DOM 树里的
parentElement，盯紧每一层的overflow-x和overflow-y计算值 - 重点排查 UI 框架组件：微信小程序的
scroll-view、Ant Design 的.ant-modal-body、Swiper 外层 wrapper - 临时给可疑节点加
overflow: visible !important，如果 sticky 立刻恢复，就锁定了问题层
必须保留 overflow: hidden 时怎么绕过
很多场景下裁剪是刚需（圆角卡片、弹窗防穿出），硬删会破 UI。别改 overflow，换锚点或换裁剪方式：
- 用
clip-path: inset(0)替代overflow: hidden：视觉效果完全一致，但不创建新滚动上下文，sticky 行为 100% 保留 - 把 sticky 元素提一层：比如从
.card内部提到外层明确设了overflow-y: auto的容器下，或挂到body下（注意z-index和布局影响） - 慎用
transform、filter、will-change：它们会在爷爷级就创建新层叠上下文，让 sticky 参考系变成变换后的容器，而不是视口
Flex/Grid 父容器里 sticky 不工作怎么办
flex 或 grid 容器本身不自动产生滚动上下文，Safari 对“可滚动区域”的判断更苛刻：需要明确主轴方向 + 可滚动空间 + 稳定基线参考，缺一不可。
- 给 flex 父容器加
flex-direction: column+overflow-y: auto（不是overflow: auto） - 显式设
max-height或height，比如max-height: 500px；只靠min-height: 100vh不够，iOS Safari 中vh会随地址栏显隐抖动 - 加
align-items: flex-start，避免align-items: stretch或baseline干扰“进入视口”的判定 - 绝对别用
display: inline-flex或inline-grid——inline 级容器不创建 BFC，sticky 直接失效
旧版 Safari 和安卓 WebView 的兼容性兜底
iOS 15.4 及更早版本（覆盖大量存量设备）完全不识别 position: sticky，只认 position: -webkit-sticky；部分安卓 WebView（如华为 X5 旧内核）压根没实现该特性。
-
position声明顺序必须是：position: -webkit-sticky;在前，position: sticky;在后——写反了整条规则会被忽略 - 用 JS 特性检测：
CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky')，别信@supports，某些旧 WebView 会解析失败丢整段 CSS - 检测不支持时，别只加
position: fixed——fixed 会让下方内容上蹿，得用IntersectionObserver+ 动态切position类型来模拟
最常被忽略的是：sticky 的生效范围严格受限于其包含块的高度边界。哪怕所有样式都对，只要最近可滚动祖先的高度被 height: 100vh 截断，它就会在滚动中途突然“掉下去”。min-height 是底线，overflow-y: auto 是开关，而祖先的 overflow 属性才是真正的闸门。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
