sticky失效主因是父容器height:100vh限制了粘性范围，应改用min-height:100vh；同时需检查祖先元素的overflow、transform等属性是否创建了新的滚动上下文或层叠上下文。
父容器 height: 100vh 是 sticky 失效的头号原因
写了 position: sticky，滚动到一半就“掉下去”，不是 CSS 写错了，大概率是父容器被 height: 100vh 锁死了高度。浏览器会把 sticky 的作用域严格限制在这个固定高度内——哪怕页面内容撑到了 300vh，.header 也只能在前 100vh 内粘住，之后就退回文档流。
- ✅ 改成
min-height: 100vh：既保底视口高度，又允许随内容自然伸展 - ❌ 别碰
height: 100vh或max-height: 100vh：它们会物理性截断粘性范围 - ⚠️ 检查所有祖先元素：从 sticky 元素往上逐层看，只要某一级用了
height（哪怕不是 100vh），且内容实际超出它，就可能成为“隐形边界”
sticky 元素的滚动上下文到底是谁？
浏览器不会默认拿 body 或 html 当滚动容器——它只认**最近的、有溢出且可滚动的祖先**。如果中间某层加了 overflow: auto，哪怕内容没溢出，它也会被当作“滚动上下文”，结果 sticky 只在那一小块里起作用。
- 用开发者工具选中 sticky 元素 → Computed 面板看
position值：滚动时要是变回relative，说明上下文丢了 - 检查路径上所有祖先的
overflow：尤其警惕overflow: hidden—— 它直接禁用 sticky - 移动端 iOS Safari 更敏感：15.4 之前版本根本不支持
body作为 sticky 上下文，必须手动建一个.scroll-container
transform、filter、will-change 会让 sticky 彻底失能
哪怕只是给 sticky 元素或其任意祖先加了一行 transform: translateZ(0)，sticky 就会立刻失效。这不是兼容性问题，而是规范行为：这些属性会创建新的层叠上下文和格式化上下文，把 sticky “关进小黑屋”。
- 逐级检查祖先的 Computed Styles，重点搜
transform、filter、will-change、perspective - 临时删掉可疑样式验证；修复方式通常是把
transform移到更外层容器，或改用margin-top替代 -
z-index在这种场景下也靠不住：一旦创建新层叠上下文，z-index就只在那个小范围里生效
内容太短，sticky 根本没机会触发
很多人测 sticky 时只放了三两行文字，页面根本滚不起来。sticky 不是“悬浮”，而是“滚动吸附”——没有滚动，就没有粘性。
立即学习“前端免费学习笔记（深入）”；
- 确保 sticky 元素所在容器的总内容高度 > 容器自身高度（比如用多个
.item堆高.main） - 临时加
border或outline看父容器是否真有滚动条出现 - Grid/Flex 布局中慎用
height: 100%：它常和1fr冲突，导致父容器高度计算异常，间接让 sticky 失效
