sticky元素“滚到底就消失”是因为其被限制在可滚动祖先的内容边界内生效，超出后退化为relative；常见失效原因包括父容器height:100vh、overflow:hidden或transform等破坏滚动上下文。
sticky元素为什么“滚到底就消失”
因为 position: sticky 不是固定在视口，而是被限制在「粘性约束矩形」内生效——这个矩形由最近的、可滚动的祖先容器的内容边界（clientHeight 或 scrollHeight）决定。一旦元素滚动超出该矩形底部，它立刻退回到 position: relative 行为，随文档流继续下移，看起来就像被“拉走”了。
你可以用 DevTools 实时验证：选中 sticky 元素，在 Computed 面板里观察 position 值。滚动过程中若显示 sticky，说明还在约束矩形内；一旦变成 relative，就是已触达父容器底部边界。
父容器 height: 100vh 是最常见失效原因
当父容器设了 height: 100vh，它的高度就被硬性锁死，哪怕子内容总高度远超视口，也不会产生纵向滚动条。此时浏览器认为“无需滚动”，sticky 失去触发前提，直接退化为普通流布局。
- 错误写法：
.page { height: 100vh; }→ sticky 在滚动几屏后突然消失 - 正确写法：
.page { min-height: 100vh; }→ 容器可随内容自然撑高，滚动上下文完整 - 如果必须限制高度（如弹窗内），请改用
max-height+overflow-y: auto，确保父容器自身可滚动
父容器 overflow: hidden 或 transform 会切断粘性上下文
sticky 元素依赖一个“干净”的滚动祖先。以下操作会破坏该链路：
-
overflow: hidden或overflow: clip：直接剥夺滚动能力，sticky 永远不触发 -
transform、filter、will-change应用于父容器：创建新的层叠上下文或隔离滚动容器，导致 sticky 脱离预期锚点 - 微信小程序中
scroll-view组件默认带overflow: auto，但其内部 sticky 通常失效——应把 sticky 元素提级到scroll-view外
iOS 下 sticky 闪动或消失的特殊处理
Safari 对 sticky 的实现更敏感，尤其在橡皮筋滚动（overscroll）时，会因坐标系临时偏移导致粘性状态错乱。这不是 bug，而是渲染机制差异。
- 避免对 sticky 元素本身加
transform或opacity类合成属性 - 父容器不要设
overflow: hidden，iOS 下它比桌面端更容易干扰粘性计算 - 极端场景可用 JS 降级：监听
scroll，在 overscroll 区间手动切回position: fixed，松手后还原 —— 但仅限必须保体验的导航栏等关键元素
真正要盯住的，从来不是 top 值设多少，而是 sticky 元素的**直接父容器是否构成有效的、可测量的滚动上下文**。高度、溢出、变换、层级——四个维度里只要一个断掉，它就会悄无声息地退出粘性状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
