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 会直接失去锚定目标。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• DevTools 里必须同时检查 html 和 body 的 overflow computed 值
• 尤其注意 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 外再套一个
  ，给它设 position: relative，再把 sticky 元素挂进去 —— 这样它的最近可滚动祖先就跳过了 body
• 极端情况（如第三方 SDK 完全控制 body），可用 position: fixed + getBoundingClientRect() 监听 scroll 模拟，但要手动处理 iOS Safari 的节流和抖动

最容易被忽略的是：失效源头往往不在你写的样式里，而在框架注入的 html 或 body 内联样式中；overflow: auto 和 scroll 在 body 上和 hidden 一样致命，只要它没真正形成滚动上下文，sticky 就不会触发。