sticky 失效的四大主因：父容器高度为0、内容未超容器高度、祖先overflow截断滚动链、height:100vh锁死上下文；需确保父容器有非零可滚动高度、内容溢出、无截断overflow、用min-height替代height。
sticky 元素所在容器高度为 0 时根本不会触发
浏览器判定 sticky 是否生效，第一步就是看它的直接父容器有没有“可滚动的上下文”——而这个上下文必须有非零的、可溢出的高度。如果父容器高度是 0px（比如内容没撑开、又没设 height/min-height），那它连滚动条都不会出现，sticky 就被直接跳过，连尝试都不做。
常见场景包括：
• Flex 容器设了 flex: 1，但上层没给 height 或 min-height
• Grid 容器行轨道未定义高度，子项用 align-items: center 把 sticky 元素“悬空”在中间
• 父级用了 display: contents 或 display: inline-flex，不产生块级格式化上下文（BFC）
• 纯文字流容器，内容太少，DevTools 的 Layout 面板里显示 Computed Height: 0px
验证方式：选中父容器 → DevTools 的 Layout 标签页 → 看 “Layout Bounds” 是否有实际高度区域。临时加 min-height: 1px 就能激活 sticky —— 这不是 hack，是告诉浏览器“这里至少有一行空间可滚”。
父容器高度 ≤ sticky 元素自身高度，粘不住
sticky 的吸附行为需要“滚动发生”，而滚动发生的前提是容器内容总高度 > 容器自身高度。如果父容器设了 height: 200px，里面只放了一个高 250px 的 sticky 元素（比如带 padding 的 header），那容器根本不会溢出，也就没有滚动，sticky 自然不启动。
典型错误写法：
• 给 sticky 元素加了 height: 100%，又没约束父容器高度
• 在 overflow: auto 容器里只放一个 sticky 元素，没其他内容撑高
• 使用 flex: 1 的子项把父容器“填满”，导致无剩余空间供滚动
解决思路不是硬塞内容，而是确保父容器具备真实滚动能力：
• 显式设 max-height + overflow-y: auto，并让子内容总高度 > max-height
• 用 min-height 替代 height，允许内容自然撑开
• 在测试阶段临时加 border: 1px solid red 看容器是否真有滚动条
祖先元素 overflow: hidden/auto/scroll 暗中截断滚动链
sticky 不是在整个页面找滚动容器，而是向上查找“最近的可滚动祖先”。只要路径上任意一层（不一定是直接父级）写了 overflow: hidden、overflow: auto 或 overflow: scroll，它就立刻成为那个“最近的可滚动祖先”——哪怕它当前根本没滚动条。
结果就是：
• overflow: hidden：sticky 直接退化为 static（DevTools 里 computed position 变成 static）
• overflow: auto：sticky 只在该容器内粘，超出即回归文档流
• 框架组件如 .ant-modal、.card、Swiper 根节点常自带 overflow: hidden，容易被忽略
排查方法：
• 用 DevTools 逐层点击 sticky 元素的祖先节点 → Computed 面板查 overflow 值
• 临时加 overflow: visible !important 到疑似父级，看 sticky 是否恢复
• 若不能删 overflow，可用 clip-path: inset(0) 替代 overflow: hidden，视觉一致但不切断粘性链
height: 100vh 是 sticky 失效的头号伪装者
写了 height: 100vh 的容器，看起来占满视口，实则锁死了滚动上下文。哪怕子内容撑到 500vh，容器也不会产生滚动条，浏览器判定“无需滚动”，sticky 的 top 条件无法持续满足，结果就是滚动一段后突然掉下去。
这不是兼容性问题，是规范行为：
• height: 100vh → 物理截断，sticky 作用域严格限于这 100vh 内
• max-height: 100vh + overflow-y: auto → sticky 锚定在小滚动区内部，不是整页
• min-height: 100vh → ✅ 正确解法，保底视口高度，又允许内容自然伸展
特别注意：
• Flex/Grid 布局中，兄弟项设 height: 100% 可能挤压父容器高度计算
• 移动端 iOS Safari 对 body 作为 sticky 上下文支持有限，更依赖明确的、有高度的容器
• transform、filter、will-change 会创建新层叠上下文，同样让 sticky 失效，需一并检查
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
