body或html设置overflow:hidden/auto/scroll会静默将sticky元素降级为static，因其破坏了sticky必需的可滚动包含块；需用DevTools检查二者computed overflow值，优先以clip-path:inset(0)替代或提升sticky元素DOM层级修复。
给 body 设置 overflow: hidden、auto 或 scroll 会直接让所有 sticky 元素退化为 static，不是“粘不住”，是浏览器压根不启动 sticky 计算逻辑。
为什么 body 的 overflow 会静默杀死 sticky
sticky 定位必须锚定在「最近的、可滚动的块级包含块」上。而 body 是绝大多数 sticky 元素的顶层祖先 —— 一旦它自己被设为 overflow: hidden（常见于弹窗遮罩、全屏动画、防滚动穿透），它就创建了一个不可滚动的新包含块边界。浏览器判定：“这个容器不滚，sticky 没意义”，于是连尝试都不试，直接把 position 的 computed 值设为 static。
更隐蔽的是：overflow: auto 或 scroll 在 body 上也危险。哪怕页面内容足够长，只要 body 的实际滚动行为被其他样式干扰（比如 height: 100vh 压扁了它、或父级 html 被设了 overflow: hidden），body 就可能失去“可滚动”资格，sticky 同样失效。
- 用 DevTools 选中任意 sticky 元素 → 看「Computed」面板里
position是否为static - 接着点开 DOM 树里的
body→ 查overflow-x和overflow-y的 computed 值 - 临时加
body { overflow: visible !important }，如果 sticky 立刻恢复，就是它
body 失效时，html 层级也可能被连坐
很多人只查 body，却漏了 html。CSS 规范中，html 才是初始包含块；当 body 高度不足时，滚动实际发生在 html 上。如果 html 被设了 overflow: hidden（比如某些 UI 框架重置样式、或防 iOS 滚动回弹的 hack），sticky 会直接失去锚定目标。
立即学习“前端免费学习笔记（深入）”；
- DevTools 里必须同时检查
html和body的overflowcomputed 值 - 尤其注意 CSS-in-JS 库或框架注入的内联样式，它们可能在运行时悄悄给
html加overflow: hidden - 移动端 iOS Safari 对
html层滚动上下文更敏感，html { height: 100% }+body { min-height: 100vh }组合反而容易断链
不改 body 的 overflow，怎么救 sticky
业务上常需要 body { overflow: hidden } 来锁住背景滚动（比如 Modal 弹出时），硬删会破交互。绕过比硬改更可靠：
- 用
clip-path: inset(0)替代overflow: hidden：视觉裁剪一致，但不创建新包含块，sticky 链完整保留（Chrome 93+、Firefox 97+、Safari 15.4+） - 若必须锁滚动，把 sticky 元素提一层：在
body外再套一个<div id="app">，给它设position: relative，再把 sticky 元素挂进去 —— 这样它的最近可滚动祖先就跳过了body - 极端情况（如第三方 SDK 完全控制
body），可用position: fixed+getBoundingClientRect()监听scroll模拟，但要手动处理 iOS Safari 的节流和抖动
最容易被忽略的是：失效源头往往不在你写的样式里，而在框架注入的 html 或 body 内联样式中；overflow: auto 和 scroll 在 body 上和 hidden 一样致命，只要它没真正形成滚动上下文，sticky 就不会触发。
