IE11 原生不支持 position: sticky，CSS 引擎直接忽略该值，getComputedStyle 返回 static；推荐使用 stickybits 降级，或手写节流 scroll + fixed 模拟逻辑。
IE11 原生不支持 position: sticky，不是写法问题，也不是加前缀能解决的——它压根不解析这个值，直接当无效声明丢弃。
getComputedStyle(el).position 返回 static 就是铁证
在 IE11 控制台执行 getComputedStyle(document.querySelector('.header')).position，结果一定是 static。这不是“没生效”，是 CSS 引擎根本没识别 sticky 这个关键字。Trident 渲染器从没实现该规范，所有相关样式都会被静默忽略，DevTools 里也看不到警告。
- 任何尝试：加
-ms-sticky、改top值、调父容器overflow或z-index，全无效 - 检查 computed 样式时，
position列显示为static，且top等偏移属性也不参与计算 - 不要用
IntersectionObserver类 polyfill——IE11 不支持该 API，会直接报错退出
stickybits 是目前对 IE11 兼容最稳的轻量方案
它不依赖新 API，只靠 getBoundingClientRect() 和节流后的 scroll 事件，在 IE9+ 都能跑。v3.x 版本仍明确支持 IE11，体积仅约 2KB。
- 安装：
npm install stickybits，然后import stickybits from 'stickybits'（或直接 script 引入） - 初始化：
stickybits('.nav-header', { useFixed: true })，useFixed: true强制启用position: fixed模拟逻辑 - 它会自动添加
is-stickyclass，并内联top值；销毁时调用stickybits().cleanup()，避免内存泄漏 - 注意：
stickybits默认不处理env(safe-area-inset-top)，如需适配刘海屏，得手动传stickyStart参数
手写降级代码比引入 polyfill 更可控的场景
如果只是单个导航栏、且项目未用模块打包工具，直接 JS 控制 position: fixed 反而更轻、更易调试。
立即学习“前端免费学习笔记（深入）”；
- 给目标元素加 class：
<header class="js-sticky-fallback"></header>，初始 CSS 设position: relative - 监听
scroll：window.addEventListener('scroll', () => { ... })，用el.getBoundingClientRect().top 判断是否触顶 - 满足条件时设
el.style.position = 'fixed'; el.style.top = '0';，并记录原始offsetTop用于回退 - 必须节流：用
requestAnimationFrame包一层，否则 IE11 下滚动卡顿明显；不要监听resize自动重算——IE11 对 resize 触发不可靠
真正麻烦的不是“怎么让它动起来”，而是边界情况：比如 sticky 元素嵌在 transform 容器里，或父级是 inline-flex，这些场景下即使 polyfill 也会错位。这时候得先重构布局，而不是堆 JS 补丁。
