IE11原生不支持position: sticky，Trident引擎完全未实现该规范，getComputedStyle返回static且无提示；必须用JavaScript模拟，推荐stickybits（v3.8.4）并启用useFixed:true，或手写scroll监听+requestAnimationFrame节流+占位符防跳变。
IE11 原生不支持 position: sticky，任何写法、前缀或样式调整都无效——它根本不会解析这个值，直接降级为 static。必须用 JavaScript 模拟。
为什么 position: sticky 在 IE11 里完全没反应
IE11 的 Trident 渲染引擎从未实现 sticky 规范，getComputedStyle(el).position 返回的永远是 static，开发者工具里该声明会被静默忽略（不会报错，也不会划掉）。加 -ms-sticky 或 -webkit-sticky 前缀毫无意义；调 top、改父容器 overflow、设 z-index 全部无效——因为连触发逻辑都不存在。
用 stickybits 快速降级（推荐给多数项目）
它体积小（约2KB）、无依赖、专为 IE9+ 设计，比手写 scroll 监听更可靠：
- 安装：
npm install stickybits@3.8.4（v4+ 已放弃 IE 支持） - 初始化：
stickybits('.header', { useFixed: true })——useFixed: true是 IE11 必选项，否则 fallback 逻辑不启用 - 它会自动添加
is-stickyclass，并内联top值，无需额外 CSS 切换 - 组件卸载时务必调用
stickybits().cleanup()，否则 IE11 下易内存泄漏 - 注意：它不处理
env(safe-area-inset-top)，如需刘海屏适配，得手动传stickyStart参数
手写 JS 降级时必须绕开的坑
自己监听 scroll 看似简单，但 IE11 下极易出问题：
立即学习“前端免费学习笔记（深入）”；
- 不节流就卡：必须用
requestAnimationFrame包裹判断逻辑，setTimeout或debounce在 IE11 下仍可能掉帧 - 别信
resize：IE11 对该事件触发极不敏感，DOM 更新后应手动调用一次定位校准 - 占位符不能少：切到
position: fixed前，得在原位置插入一个同尺寸的空div，否则页面会跳动 - 别依赖
offsetTop：IE11 中该值在缩放或高 DPI 下不稳定，改用getBoundingClientRect().top+ 当前window.pageYOffset更稳妥 -
transform容器内失效：JS 模拟无法还原原生 sticky 的包含块计算，若目标元素在transform父级里，优先考虑提升 DOM 层级
什么时候该换 IntersectionObserver 方案
当 sticky 元素嵌在 position: absolute 弹窗、iframe 或复杂 transform 布局里，stickybits 定位会偏移——这时用 IntersectionObserver 更稳：
- 它异步监听，不触发强制 layout，IE11 虽不支持，但可安全 fallback 到
getBoundingClientRect（iOS Safari 9+ 和 Edge 16+ 均支持） - 设置
{ threshold: [0] }，当元素顶部与视口顶部对齐时触发，比反复读取top更低开销 - 注意：不要用基于
IntersectionObserver的新版 polyfill（如某些sticky-sidebar），它们在 IE11 里会直接报错退出
真正麻烦的不是写 JS 模拟，而是 sticky 行为在不同上下文（比如嵌套滚动、transform 容器、iframe）里的边界差异——这些地方原生和 JS 实现永远存在偏差，得靠具体场景具体测。
