IE11不支持position: sticky，Trident引擎直接忽略该声明；可用stickybits（需useFixed: true）或手写scroll+getBoundingClientRect降级实现。
IE11根本不解析position: sticky，不是写法问题
在 IE11 控制台执行 getComputedStyle(el).position，结果一定是 static——这不是“没生效”，是 Trident 渲染引擎压根不识别 sticky 这个关键字，整条声明被静默丢弃。加 -ms-sticky、调 top、改父容器 overflow 或 z-index 全无效。DevTools 的 Computed 面板里连警告都没有，top 等偏移属性也不参与计算。
用 stickybits 做轻量 JS 降级（推荐用于多处 sticky 场景）
它不依赖 IntersectionObserver（IE11 不支持），只靠 getBoundingClientRect() 和节流后的 scroll 事件，v3.x 版本明确支持 IE9+，体积约 2KB。
- 安装：
npm install stickybits，然后import stickybits from 'stickybits'或直接<script>引入 - 初始化必须加
{ useFixed: true }：stickybits('.nav-header', { useFixed: true })，否则 IE11 下不启用fixed模拟逻辑 - 它会自动添加
is-stickyclass 并内联top值；销毁时调用stickybits().cleanup()，避免内存泄漏 - 注意：
env(safe-area-inset-top)不会被自动处理，需手动传stickyStart参数
手写 scroll + getBoundingClientRect 降级（适合单个导航栏或无打包环境）
比引入 polyfill 更可控，也更容易调试：
- 给目标元素加 class：
<header class="js-sticky-fallback">，初始 CSS 设position: relative - 监听
scroll：window.addEventListener('scroll', () => { ... })，用el.getBoundingClientRect().top 判断是否触顶 - 满足条件时设：
el.style.position = 'fixed'; el.style.top = '0';，并缓存原始offsetTop用于回退 - 必须节流：用
requestAnimationFrame包一层，否则 IE11 滚动卡顿明显；不要监听resize自动重算——IE11 对该事件触发不可靠
真正容易被忽略的边界情况
即使降级方案跑起来了，这些场景仍会出错：
立即学习“前端免费学习笔记（深入）”；
-
sticky元素嵌在transform容器里（比如transform: translateZ(0)），JS 模拟也会错位 - 父级是
display: inline-flex或table，getBoundingClientRect()返回值可能受渲染差异影响 - 局部滚动容器（如
overflow: auto的 div）里用 sticky，降级代码需监听该容器的scroll，而不是window - 移动端微信 X5 内核对 sticky 支持极不稳定，建议用
@media (max-width: 768px)强制降级
