position: sticky 不生效的常见原因包括父容器未设置滚动上下文、祖先元素创建新层叠上下文、top 值未显式设置、在 table 元素上使用，以及 iOS Safari 15.2–15.3 的兼容性 bug。
position: sticky 不生效的常见原因
直接加 position: sticky 却没吸顶？大概率是父容器“拦住了”。sticky 依赖最近的**有滚动行为的祖先容器**，如果父级 height 没限制、overflow 是默认值（visible），它就找不到可依附的滚动上下文。
- 确保父容器设置了
max-height或height，且overflow-y: auto或scroll - 检查祖先元素是否意外设置了
transform、filter、will-change—— 这些会创建新的层叠上下文，导致sticky失效 -
top值必须显式设置（如top: 0），设成auto或不写等于白配 - 不要在
table元素或display: table-*上用sticky，兼容性差且行为不可靠
兼容性与降级方案怎么选
position: sticky 在现代浏览器中已稳定支持（Chrome 56+、Firefox 59+、Safari 15.4+），但 iOS Safari 15.2–15.3 有严重 bug：滚动卡顿、吸顶错位、甚至触发后无法恢复。不能只靠 @supports 判断。
- 真要兼容老 iOS，优先用 JavaScript 监听
scroll+ 动态切position: fixed，但注意处理fixed脱离文档流造成的页面跳动 - 用
IntersectionObserver替代scroll事件监听，性能更好，也避开 iOS scroll event 的延迟问题 - 如果项目已用 React/Vue，别手写 scroll handler，用
useSticky或v-sticky这类成熟封装，它们内部已处理了getBoundingClientRect()边界判断和重绘抑制
sticky 和 fixed 混用时的布局塌陷问题
当 sticky 元素吸顶后，它仍保留在文档流中（只是视觉上“粘住”），而 fixed 完全脱离流。混用时容易漏掉占位补偿，导致下面内容突然上蹿。
- 若用 JS 降级为
fixed，必须同步给下一个兄弟元素加margin-top或padding-top，值等于头部高度 - 别用
top: 0+left: 0把fixed元素压到视口左上角——它会盖住内容，且无法响应父容器宽度变化 - 真正安全的做法：吸顶状态统一由一个 class 控制（如
.is-stuck），CSS 中用.is-stuck { position: fixed; top: 0; width: 100%; }，再配合body的padding-top补偿
移动端 touch 滚动下 sticky 的响应延迟
iOS Safari 和部分安卓 WebView 中，sticky 吸顶可能滞后 1–2 帧，尤其快速滚动时出现“闪一下才吸住”的现象。这不是 bug，而是浏览器对 touch 滚动的合成策略导致的渲染时机问题。
- 加
will-change: transform到 sticky 元素，能提前触发图层提升，减少合成延迟（但别滥用，会增加内存开销） - 避免在 sticky 元素内放大量重绘内容（比如实时图表、频繁更新的 badge），这些会拖慢粘性计算
- 如果头部含
input或需要 focus，iOS 下 sticky 后键盘弹出会触发 layout shift，此时必须监听focusin+resize事件手动修正位置
吸顶看着简单，实际卡点全在边界条件里：滚动容器的 overflow、祖先的层叠上下文、移动端的合成时机、还有降级时的流式占位。漏掉任意一个，用户一滑就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
