position: sticky 在移动端弹窗中常失效，因其依赖滚动上下文，而弹窗多脱离文档流、无有效滚动父容器或受 overflow/transform 阻断；可靠方案需满足滚动容器+sticky子项闭环，或降级为JS控制的fixed定位。
position: sticky 不能直接用于移动端弹窗顶部吸顶——它只在**滚动上下文内生效**，而弹窗（如 modal、popup）通常脱离文档流、无滚动父容器，或自身就是滚动主体，此时 sticky 会退化为 static。
为什么弹窗里加 position: sticky 没反应
常见失效场景包括：
- 弹窗用
position: fixed或position: absolute全屏覆盖，其子元素无法获得有效的滚动祖先 - 弹窗内容区未设
max-height+overflow-y: auto，导致内部无滚动行为，sticky失去触发条件 - 弹窗父层（如遮罩层
.mask）设置了overflow: hidden或transform，阻断了 sticky 的定位上下文 - 在
scroll-view（uni-app）、IonContent（Ionic）等自定义滚动容器中，sticky支持不一致，iOS Safari 尤其容易失效
真能用 sticky 吸顶的弹窗结构长什么样
必须满足「滚动容器 + sticky 子项」最小闭环。典型可跑通结构如下：
<div class="popup">
<div class="popup-header" style="position: sticky; top: 0; z-index: 10;">
弹窗标题
</div>
<div class="popup-body" style="max-height: 60vh; overflow-y: auto;">
<p>滚动内容…</p>
</div>
</div>
关键点：
立即学习“前端免费学习笔记（深入）”；
-
.popup-body是唯一滚动容器，且高度受限（不能是height: auto） -
.popup-header必须是.popup-body的**直接子元素**，或至少同属一个有明确滚动边界的父级 - 不要给
.popup或其祖先设overflow: hidden、transform、filter - iOS Safari 需补
position: -webkit-sticky，且避免在top中使用env(safe-area-inset-top)—— 它在弹窗内常返回0导致偏移错位
移动端弹窗吸顶更稳的替代方案
当 sticky 不可控时，优先降级为 JS 控制的 position: fixed，但必须守好三件事：
- 监听的是弹窗内部滚动（
.popup-body的scroll），不是window；用IntersectionObserver比scroll事件更可靠（尤其 iOS） - 吸顶后，给
.popup-body加padding-top或插入占位<div style="height: 48px"></div>，防止内容上蹿 - 在
touchstart前就预判吸顶状态，避免首帧延迟；必要时对.popup-header加will-change: transform缓解 iOS 渲染卡顿 - uni-app 等框架中，若弹窗基于
scroll-view，别手动切fixed—— 应改用框架提供的sticky属性（如scroll-view的enable-flex+ 子节点sticky类）
真正难的不是让 header “粘住”，而是让它在各种弹窗嵌套、安全区适配、键盘唤起、WebView 版本混杂的环境下始终不跳、不闪、不遮挡。这时候，sticky 是个好起点，但不能当作终点。
