position: sticky是原生滚动吸附方案，必须设top等偏移值、避免祖先overflow/transform干扰、确保元素盒类型合规，否则静默退化为relative；JS模拟易致跳变、占位错乱与响应滞后。
直接用 position: sticky，别写 JS 监听 scroll 事件手动切 position —— 除非你明确需要兼容 IE 或极老安卓 WebView。
为什么不用 JS 切换 relative/fixed？
手动监听 scroll 并在阈值处切换 position: relative 和 position: fixed 看似直观，但实际踩坑密集：
- iOS Safari 滚动时会暂停 JS 执行，导致“跳变”或定位延迟
- 滚动抖动、节流不当会造成视觉撕裂或响应滞后
- fixed 元素脱离文档流后，下方内容会突然上移，需额外计算占位或插入占位元素
- 页面缩放、横竖屏切换、软键盘弹出都会让 JS 计算的 offset 失准
position: sticky 的正确写法和必要条件
position: sticky 就是为这个场景设计的：滚动中自然过渡，不卡顿，不脱离布局流（直到粘住），且原生支持浏览器优化。
必须同时满足以下条件才生效：
立即学习“前端免费学习笔记（深入）”；
- 设置
position: sticky - 至少指定
top、bottom、left或right中的一个（例如top: 0） - 元素不能是
display: flex或display: grid容器的直接子项（除非父容器设了align-items: stretch等显式拉伸） - 祖先元素不能有
overflow: hidden、overflow: clip或transform（会截断 containing block）
示例：
header {
position: sticky;
top: 0;
background: white;
z-index: 100;
}
它会在滚动到距视口顶部 0px 时“吸顶”，之前仍是 normal flow 中的相对定位行为。
常见失效原因和快速排查路径
如果写了 position: sticky 却没反应，优先检查：
- 开发者工具里看该元素的 Computed → Containing Block 是否为
Viewport；不是？说明被某个祖先的transform、filter、opacity < 1或will-change劫持了 - 父容器是否设置了
overflow: hidden或overflow: clip—— 这会让 sticky 失效（CSS 规范明确要求 containing block 必须可滚动） - 元素本身是否被设了
display: inline或display: table-cell—— sticky 只对block、inline-block、table等盒类型生效 - 是否在 iOS Safari 里测试？确认没有套在
-webkit-overflow-scrolling: touch的滚动容器内（已废弃但仍有存量）
兼容性兜底和降级策略
如果你的项目仍需支持 IE11 或 Android 4.4 WebView，sticky 不可用，此时才考虑 JS 方案：
- 用
IntersectionObserver替代scroll事件监听（性能更好、无卡顿） - 切换前先用
getBoundingClientRect()获取元素原始位置，再设position: fixed+top值，避免跳动 - 务必在
fixed后插入一个同高度的占位<div>，防止内容塌陷 - 移动端要监听
visualViewport变化（如软键盘弹出），动态调整top
真正难的不是实现“固定”，而是让固定行为在各种视口变化、输入交互、动画触发下依然稳定 —— 这恰恰是 sticky 原生解决、而 JS 很难 100% 覆盖的部分。
