position:sticky 失效的根本原因是依赖父容器滚动上下文：父容器需有高度限制和 overflow-y:auto，top 必须设置，且不能与 transform、float 等共用；其滚动容器是最近的溢出祖先，非 body/html 时会局部生效。
position:sticky 为什么在滚动到目标位置后不悬停
根本原因不是“没生效”，而是 position:sticky 依赖父容器的滚动上下文和边界限制。它只在父容器内“相对滚动”起作用，一旦超出父容器可视范围（比如父容器高度不够、或父容器本身不滚动），就会立刻脱离粘性状态。
- 父容器必须有明确的高度限制（如
max-height或height）且设置了overflow-y: auto（或scroll），否则子元素根本没“可粘”的滚动容器 -
top值必须设置（哪怕为0），否则浏览器不识别为 sticky 元素 - 不能和
float、clear、vertical-align同时使用；也不能用在table的tr/td上（部分浏览器不支持） - 如果父容器是
body直接子元素，而body没设min-height: 100vh或类似约束，滚动时可能因 body 高度塌陷导致 sticky 失效
如何让 sticky 在页面主滚动流中生效（而不是局部容器）
多数人想的是“滚动到某区块后标题吸顶”，但默认情况下 position:sticky 只响应**最近的带滚动的祖先容器**。要让它响应整个页面滚动，就得确保它没有被中间某个 overflow:hidden 或 overflow:auto 的父级截断。
- 检查 DOM 结构：从 sticky 元素往上逐层看，第一个设置了
overflow-y: auto|scroll的祖先就是它的“滚动容器”——如果你希望它随整个页面滚动，那这个祖先就应该是html或body - 给
body加overflow-x: hidden是安全的，但别加overflow-y: hidden，否则整个页面都不能滚，sticky 就永远没机会触发 - 常见翻车点：用了某些 UI 框架（如 Ant Design 的
Layout.Sider或Modal）后，内部自动加了overflow，把 sticky 元素“框死”在局部区域里
sticky + transform 导致失效的典型场景
只要父容器或 sticky 元素自身用了 transform（哪怕只是 transform: translateZ(0)），就会创建新的层叠上下文和格式化上下文，使 position:sticky 完全失效——这是 Chrome/Firefox/Safari 共同行为，不是 bug。
- 检查是否无意中给 sticky 元素加了
transition、animation或will-change，这些可能隐式触发transform - 避免对 sticky 元素的父容器设置
transform；如果必须做动效，改用margin或top配合position:relative - 调试技巧：在 DevTools 中临时删掉所有
transform相关声明，看 sticky 是否恢复——能恢复，基本就是它的问题
兼容性与降级方案的现实取舍
IE 完全不支持 position:sticky，iOS Safari 15.4 之前存在滚动卡顿和脱离粘性问题，Android WebView 表现也参差不齐。纯 CSS 方案在复杂布局中很难做到“一次写完，处处可靠”。
立即学习“前端免费学习笔记（深入）”；
- 如果项目需支持 iOS scroll +
getBoundingClientRect()手动切换position:fixed类，虽然重一点，但可控 - 用
@supports (position: sticky)做渐进增强：sticky 作为首选，fallback 到 JS 逻辑，而不是反过来 - 注意：
position:sticky在打印样式表（@media print）中会被忽略，如果页面需要打印友好，这部分布局得单独考虑
真正难的不是写出 sticky 样式，而是判断它当前依附的是哪个滚动容器、有没有被 transform 或 overflow 意外截断——这些问题往往藏在看似无关的父级样式里。
