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。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 安装：npm install stickybits，然后 import stickybits from 'stickybits' 或直接 <script></script> 引入
• 初始化必须加 { useFixed: true }：stickybits('.nav-header', { useFixed: true })，否则 IE11 下不启用 fixed 模拟逻辑
• 它会自动添加 is-sticky class 并内联 top 值；销毁时调用 stickybits().cleanup()，避免内存泄漏
• 注意：env(safe-area-inset-top) 不会被自动处理，需手动传 stickyStart 参数

手写 scroll + getBoundingClientRect 降级（适合单个导航栏或无打包环境）

比引入 polyfill 更可控，也更容易调试：

• 给目标元素加 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 对该事件触发不可靠

真正容易被忽略的边界情况

即使降级方案跑起来了，这些场景仍会出错：

• sticky 元素嵌在 transform 容器里（比如 transform: translateZ(0)），JS 模拟也会错位
• 父级是 display: inline-flex 或 table，getBoundingClientRect() 返回值可能受渲染差异影响
• 局部滚动容器（如 overflow: auto 的 div）里用 sticky，降级代码需监听该容器的 scroll，而不是 window
• 移动端微信 X5 内核对 sticky 支持极不稳定，建议用 @media (max-width: 768px) 强制降级

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！