sticky元素一滚就消失是因为其粘性范围受限于最近的可滚动祖先容器，需满足三条件：父容器有overflow:auto/scroll、显式高度、不触发新层叠上下文；top值相对于父容器内原始位置而非视口。
sticky元素为什么一滚就消失？
因为 position: sticky 的“粘性范围”严格受限于其**最近的可滚动祖先容器**，不是视口，也不是 body。如果父容器高度不够、没滚动能力，或者被裁剪了，sticky 元素滚出父容器边界就会立刻“松开”，恢复相对定位行为——这不是 bug，是规范定义。
确保父容器支持 sticky 的三个硬条件
缺一不可，否则 top 值再对也白搭：
- 父容器必须有明确的可滚动上下文：即
overflow: auto、overflow: scroll或overflow: overlay（注意：overflow: hidden和overflow: visible都不行） - 父容器高度必须显式设置（如
height: 500px或max-height: 60vh），不能靠内容撑开；否则浏览器无法判断“滚动边界”在哪 - 父容器不能触发新层叠上下文（如无
transform、filter、will-change、opacity ），否则 sticky 会退化为 relative
top 值不是相对于视口，而是相对于父容器内原始位置
比如导航栏在父容器里原本距顶部 80px，你想让它在父容器内滚动到顶部时才吸顶，就得写 top: 80px，不是 top: 0。否则会出现“还没到顶就提前粘住”或“粘住后突然下跳”。
常见错误写法：
.nav { position: sticky; top: 0; }
.parent { overflow: auto; height: 400px; } /* nav 原本离 .parent 顶部有 60px margin */
正确写法应是：
.nav { position: sticky; top: 60px; }
.parent { overflow: auto; height: 400px; margin-top: 0; }
移动端 Safari 的 safe-area 和视口抖动问题
iOS Safari 在地址栏收放、软键盘弹出时会重算视口，导致 top: 0 瞬间偏移。别硬写 top: 0，改用环境变量：
.nav { position: sticky; top: env(safe-area-inset-top); }
同时加一行防抖动：
.nav { backface-visibility: hidden; }
如果父容器本身是 flex 或 grid 容器，还要确认它没设 align-items: center 这类居中逻辑——这会让 sticky 元素初始位置浮动，破坏 top 偏移计算基准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
