sticky元素被推走的本质是父容器包含块高度重算导致粘性边界偏移，而非sticky失效；根本解法是稳定滚动上下文，如用min-height、确保overflow-y:auto、避免transform等创建新层叠上下文。
sticky元素被动态内容“推走”的本质原因
不是 sticky 失效，而是父容器的包含块（containing block）在 JS 插入新内容后重新计算高度，导致 sticky 元素的粘性边界突然上移或消失。常见于：表格行追加、评论区加载更多、列表无限滚动等场景。浏览器会把 sticky 的作用域严格绑定到**当前渲染时刻的父容器尺寸**，一旦内容插入让父容器高度变化，原 sticky 位置就“失准”了。
为什么给父容器设 height 不是解法
显式写死 height: 600px 或 height: 100vh 会让问题更糟——它直接锁死滚动上下文范围，新内容一进来就被截断或溢出，sticky 只能在那固定高度内起作用，之后立刻退回到 relative。你看到的“被推走”，其实是 sticky 已经脱离了它唯一能生效的容器边界。
真正可靠的固化策略
不固化像素高度，而固化**滚动上下文的存在性与稳定性**：
- 用
min-height替代height：例如min-height: 100vh，既保底又允许撑高 - 确保父容器有明确的
overflow-y: auto或scroll，且不能是hidden或clip - 避免在父容器或任意祖先上使用
transform、filter、will-change—— 它们会创建新层叠上下文，让 sticky “认错爹” - 动态插入内容后，手动触发一次重排（如读取
offsetHeight），可强制浏览器刷新 sticky 边界计算
容易被忽略的兼容细节
iOS Safari 对动态内容下的 sticky 更敏感：15.4 之前版本不支持 body 作为滚动上下文；哪怕只是给父容器加了 backface-visibility: hidden，sticky 就可能静默失效。临时验证方法：在插入内容后，用开发者工具选中 sticky 元素，看 Computed → position 值是否从 sticky 变成 relative —— 如果变了，说明上下文已经丢失，得顺着祖先链逐层检查 overflow 和 transform。
立即学习“前端免费学习笔记（深入）”；
