sticky在移动端“不粘”是因为其生效需三个硬条件：最近可滚动祖先须显式设height/max-height、overflow-y:auto、sticky元素top值为像素或calc()且不能是百分比。
为什么 sticky 在移动端经常“不粘”
不是代码写错了，而是 sticky 的生效条件在移动端更苛刻：它必须依赖一个**有明确高度 + 可滚动的父容器**，而多数移动端页面默认用 body 滚动，iOS Safari（尤其是 15.4 之前）根本不认这种上下文。你写了 position: sticky; top: 0，但 computed 样式里显示 position: static，就是这个原因。
常见现象包括：导航栏闪一下就消失、滚动时完全没反应、真机上正常但模拟器里失效。
- 父容器没设
height或max-height，仅靠overflow-y: auto不够 -
body或html没设height: 100vh，子元素无法继承滚动边界 - 父元素用了
transform、filter或will-change，悄悄创建了新层叠上下文，直接禁用 sticky - 把 sticky 元素直接放在
body下——iOS 下基本无效
移动端 sticky 必须满足的三个硬条件
缺一不可，否则浏览器直接降级为 static：
-
sticky元素的**最近可滚动祖先**（不能是body）必须显式设置height或max-height，比如max-height: calc(100vh - 60px) - 该祖先必须设
overflow-y: auto或scroll（hidden和visible都不行） -
sticky元素自身必须带top（或bottom），且值不能是百分比（如top: 100%无效），推荐用具体像素或calc()
例如吸顶导航栏，正确结构是：
立即学习“前端免费学习笔记（深入）”；
.app { height: 100vh; overflow-y: auto; }
.header { position: sticky; top: 0; }注意：.app 是包裹全部内容的 div，不是 body；body 要加 overflow: hidden 防双滚动条。
bottom: 0 在移动端基本等于摆设
iOS Safari 直到 15.4 才开始支持 bottom: 0，旧版本直接忽略。即使新版本，也常因父容器高度计算不准导致错位。别写 position: sticky; bottom: 0，它大概率不工作。
替代方案分两种场景：
- 「页脚式吸底」（始终固定在视口底部）：用 Flex 布局，父容器
display: flex; flex-direction: column;，页脚加margin-top: auto - 「滚动中吸底」（只在某段内容内粘在底部）：用
position: sticky; top: calc(100% - 52px)（52px 是元素自身高度），并确保父容器高度精准
示例：
.section { max-height: 60vh; overflow-y: auto; }
.sticky-footer { position: sticky; top: calc(100% - 52px); }兼容 iOS 旧版的兜底逻辑怎么写
不能只靠 @supports (position: sticky)，因为 iOS 14/15.3 会通过检测但实际不生效。真机测试前，先加一层 JS 判断：
const isStickySupported = CSS.supports('position', 'sticky') &&
window.getComputedStyle(document.createElement('div')).position === 'sticky';如果 isStickySupported 为 false，就手动加 position: fixed 并补全四要素：
-
top/bottom（不能漏） -
left或right（避免宽度塌缩） -
width（必须设具体值，100%在某些安卓 WebView 下会失效） -
height（用100vh，不用100%）
最易被忽略的是：fixed 元素脱离文档流后，主内容区必须用 margin-top 或 margin-bottom 主动腾出空间，否则会被遮挡。
