sticky滚动一段后失效的根本原因是父容器height:100vh锁定了粘性范围，导致超出该高度后退化为static；应改用min-height:100vh并确保祖先元素无overflow:hidden、transform等干扰属性。
sticky 在元素内容撑高后“滚动一段就失效”，根本不是 bug，而是它严格按规范在工作：粘性范围被父容器高度锁死了。
为什么 height: 100vh 会让 sticky 滚动到一半就退出
当你给 sticky 元素的直接父容器设了 height: 100vh，浏览器就认定这个容器“最多只能滚 100vh”。哪怕子内容总高度是 200vh，该容器也不会产生滚动条——它不被认为是“可滚动容器”，sticky 的 top 条件也就无法持续满足。
- 结果就是：滚动前半段正常吸附，一过 100vh 边界，
position: sticky静默退化为position: static - 这不是 iOS 或安卓特有，Chrome、Firefox、Safari 全部一致行为
- 用 DevTools 查看 computed
position，会发现失效后它真变成了static，不是渲染错位
必须改用 min-height: 100vh 而不是 height
min-height: 100vh 是唯一可靠解法：既保初始视口满屏，又允许容器随内容自然伸展，让整个内容区域成为有效的滚动上下文。
- 别碰
height: 100%—— 它依赖父级高度，极易链式塌陷 - 如果父容器是 Flex 或 Grid，加
min-height: 0或height: 0强制生成包含块，否则旧 Safari 可能不认 - 避免在 sticky 元素的任何祖先上写
overflow: hidden，哪怕只是防圆角溢出，它会直接切断滚动上下文
top 值不是调“离屏幕多远”，而是调“离滚动容器顶部多远”
很多人误以为 top: 60px 是让元素离视口顶部 60px 时吸顶，其实它是说：“当元素顶部滚动到**其最近可滚动父容器的内容区顶部往下 60px 处**时，开始 sticky”。
- 若滚动容器是
.list，且它自身有padding-top: 20px，那top: 0实际触发点是距容器内边距起点 0px，也就是距容器 border-box 顶部 20px - 要避开固定 header，不要凭空写
top: 64px，而应设top: calc(64px + env(safe-area-inset-top)) - 慎用
scroll-margin-top：它只影响滚动锚点（比如scrollIntoView），对 sticky 的触发时机无直接影响
移动端特别容易踩的三个硬坑
iOS Safari ≤16.4、微信 X5 内核、部分三星/华为自带浏览器，对 sticky 的支持比桌面端更苛刻。
-
top不能用百分比（如top: 10%），会被忽略，等价于top: auto - 父容器只要带
transform、filter或will-change，sticky 就彻底静默失效 - sticky 元素不能是
display: inline-block或浮动，必须是block（默认）或flex
真正可靠的方案，是在关键机型上降级为 JS 监听 scroll + getBoundingClientRect() 手动控制 position: fixed，缓冲临界点留 1–2px，不然会抖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
