sticky在移动端失效的根本原因是浏览器需可滚动边界，须为最近可滚动祖先设max-height与overflow-y；iOS Safari要求非body容器；避免transform等创建新层叠上下文；flex容器中需align-items: flex-start或移出布局。
sticky 在移动端为什么经常失效
根本原因不是 CSS 写错了，而是很多移动端浏览器（尤其是 iOS Safari 15.4 之前、部分 Android WebView）对 position: sticky 的支持依赖父容器有明确的「可滚动边界」。如果父元素没设置 height、max-height 或 overflow，或者被弹性布局/绝对定位意外截断滚动流，sticky 就会退化为 static。
必须加的媒体查询和 overflow 控制
单纯写 @media (max-width: 768px) 不够——关键是要在移动端强制建立滚动上下文：
- 给
sticky元素的**最近可滚动祖先**（通常是body或某个section）加上overflow-y: auto或scroll，且该祖先需有明确高度限制（如max-height: 100vh） - iOS Safari 要求：该祖先不能是
body（它被系统接管），得用一层包裹容器，比如<div class="scroll-container"> - 避免在 sticky 元素上同时设
transform、perspective或filter，这些会创建新层叠上下文并破坏 sticky 行为
示例修复代码：
.scroll-container {
max-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* iOS 滚动惯性 */
}
<p>.sticky-header {
position: -webkit-sticky; /<em> iOS 必须带前缀 </em>/
position: sticky;
top: 0;
}
sticky + flex 布局的兼容性陷阱
当 sticky 元素放在 display: flex 容器里时，Safari 会忽略 top 值。这不是 bug，是规范中「flex 容器不产生块格式化上下文」导致的定位参考丢失。
Android Remote Control
下载
远程控制 Android 设备，支持截图、自动化操作手机 App 等功能。本应用使用 uiautomator2 作为底层框架，通过 ADB 连接设备，用户无需 Root（1）查看手机屏幕；（2）自动化操作手机 App；（3）远程安装/卸载应用……
立即学习“前端免费学习笔记（深入）”；
- 解决方法：给 flex 容器加
align-items: flex-start，或改用display: block+margin模拟布局 - 更稳妥的做法：把 sticky 元素移出 flex 容器，用绝对定位 + JS 监听滚动来模拟（仅当样式无法妥协时）
- 注意：不要在 flex 容器上同时设
flex-direction: column和overflow: hidden，这会让 sticky 彻底不可见
性能敏感场景下 sticky 的替代方案
页面滚动卡顿、频繁重排时，sticky 可能比预期更耗资源——尤其在低端 Android 设备上，浏览器会为每个 sticky 元素持续计算位置。
- 用
IntersectionObserver+position: fixed手动控制显隐，比纯 CSS sticky 更可控、更轻量 - 避免对多个元素同时设 sticky（比如一整列导航栏），优先合并为一个 sticky 容器
- 测试时务必在真机 Safari 和 Chrome for Android 上验证，模拟器常给出错误乐观结果
真正难处理的从来不是怎么写 sticky，而是怎么让它的滚动锚点不被父级布局、CSS 层叠或 Webview 实现细节悄悄吃掉。多一层容器、少一个 transform、一次真机滚动测试，往往比调十遍 media query 更管用。
