安卓webview中sticky失效主因是x5内核不支持该特性，表现为getcomputedstyle返回static、css.supports返回false，且@supports规则可能被跳过；需用position:fixed兜底并排查祖先transform/filter影响。
安卓机型上 sticky 表现不一致，核心原因不是你 CSS 写错了，而是底层内核压根不认 position: sticky——尤其在微信、QQ、钉钉等 App 内嵌页里，X5 内核默认禁用该特性，且不触发降级逻辑。
怎么快速判断是不是内核问题
别猜，直接验证：
- 打开页面后，在 vConsole 或远程调试工具中执行
getComputedStyle(document.querySelector('.header')).position，返回"static"就是内核不支持（哪怕样式表里明明白白写了position: sticky） - 检查
navigator.userAgent，含TBS/或MQQBrowser基本可锁定为 X5 内核 - 运行
CSS.supports?.('position', 'sticky') ?? false，X5 下几乎总是false
为什么 @supports 包裹 fallback 会失效
某些老旧 WebView（尤其是 X5 旧版）解析 @supports (position: sticky) 时直接报错或跳过整段 CSS，导致 fallback 规则根本没加载。更稳妥的做法是：
- 先写一层兜底：
position: fixed（带top: 0和补偿padding-top） - 再用
@supports (position: sticky)覆盖为position: sticky - 避免把整个组件样式都包进
@supports块里，只包裹定位相关声明
祖先元素的 transform/filter 会让 sticky 静默失效
哪怕只是爷爷级元素写了 transform: translateZ(0) 或 filter: blur(1px)，X5 和部分 Android 6–8 WebView 就会创建新层叠上下文，切断 sticky 的锚定链。现象是滚动到某处后元素突然“掉下去”。排查和修复方法：
- 在 DevTools 中逐层禁用父节点的
transform、filter、will-change - 彻底移除所有祖先上的
transform（包括translateX(0)这种“无意义”写法） - 若必须用动画效果，改用
backface-visibility: hidden临时试探，但不保证稳定
height: 100vh 是移动端 sticky 的隐形杀手
安卓 WebView 对滚动上下文判定极严：如果 sticky 元素的最近可滚动祖先（比如 .page）设了 height: 100vh，但内容高度刚好撑满，内核可能认为“无需滚动”，直接忽略 sticky。解决方案很明确：
- 把
height: 100vh改成min-height: 100vh - 确保该容器父级没有
overflow: hidden（否则min-height也救不了） - 若用 Flex/Grid 布局，额外加
align-items: flex-start，避免 Safari 等浏览器因对齐方式中断粘性流
真正麻烦的不是写错代码，而是 X5 内核连 CSS.supports 都返回 false，还静默忽略规则——这种情况下，JS 降级 + position: fixed 加布局补偿几乎是唯一可靠路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
