移动端 sticky 失效主因是祖先元素触发静默禁用：overflow 隐藏/自动、inline-flex/grid、flex/grid 父级缺失方向或高度约束；X5 内核则根本不支持，需 JS 降级为 fixed。
移动端 sticky 失效，90% 不是因为你漏写了 top，而是它压根没进入 sticky 计算流程——iOS Safari 和多数安卓 WebView 会直接把 position: sticky 降级为 static，连“尝试粘一下”都不会发生。
DevTools 显示 position: sticky 却不生效？先看 computed 值
浏览器在样式计算阶段就决定是否启用 sticky 行为。如果 sticky 元素的任意祖先（哪怕隔了三层）满足以下任一条件，它就会被静默禁用：
-
overflow: hidden、overflow: auto或overflow: scroll，且该祖先自身未形成实际滚动（例如内容没溢出、高度固定、min-height: 100vh随地址栏抖动导致不可靠） -
display: inline-flex或display: inline-grid——它们不创建块格式化上下文（BFC），sticky 规范直接忽略 - 父容器是
flex或grid，但没显式声明主轴方向（如flex-direction: column）、没设max-height、或用了align-items: center等干扰基线判定的属性
验证方法：选中 sticky 元素 →「Computed」面板里看 position 值是不是 static；如果是，说明已被截断，不是渲染问题。
逐级排查哪个祖先在“卡住” sticky
必须向上检查 DOM 树每一层，不能只盯直接父级。重点排查这些常见“藏雷”位置：
立即学习“前端免费学习笔记（深入）”；
- UI 框架组件外层：
.ant-modal-body、.van-card、微信小程序的scroll-view、Swiper 的 wrapper - CSS-in-JS 注入的内联样式，或运行时动态添加的 class（比如
is-open触发的overflow: hidden） - 父级用了
height: 100vh——iOS Safari 中视口高度会随地址栏显隐变化，导致容器高度不稳定，无法构成可靠滚动上下文
临时验证技巧：在 DevTools 中给某一层加 overflow: visible !important，如果 sticky 立刻恢复，问题就锁定了。
不删 overflow: hidden 怎么让 sticky 继续工作
很多场景下裁剪是刚需（圆角卡片、弹窗防穿出），硬删会破 UI。替代方案更稳妥：
- 用
clip-path: inset(0)替代overflow: hidden：视觉效果完全一致，但不创建新 BFC，sticky 链保持完整（Chrome 93+、Firefox 97+、Safari 15.4+ 支持） - 把 sticky 元素提一层：在带
overflow的容器外，套一个position: relative的 wrapper，再把 sticky 元素挂进去 - 若必须保留在局部滚动容器内，确保其直接父级设了
max-height+overflow-y: auto+flex-direction: column+align-items: flex-start
安卓 X5 内核等老旧 WebView 根本不支持 sticky
微信、QQ、钉钉等 App 内嵌页中，X5 内核默认禁用 position: sticky，且 CSS.supports('position', 'sticky') 返回 false，@supports 规则可能被跳过。
判断方式：
- 执行
getComputedStyle(document.querySelector('.header')).position，返回"static"就是内核不支持 -
navigator.userAgent含TBS/或MQQBrowser基本可锁定为 X5 内核
兜底写法必须 JS 参与：
if (!CSS.supports?.('position', 'sticky')) {
document.querySelector('.sticky-header').style.position = 'fixed';
// 并手动补偿 body padding-top
}
真正麻烦的不是写错代码，而是 X5 连 CSS.supports 都返回 false，还静默忽略规则——这种情况下，JS 降级 + position: fixed 加补偿是唯一可靠路径。
