ie11原生不支持position: sticky，必须降级为javascript模拟：监听scroll事件，用getboundingclientrect判断阈值，动态切换position: fixed/relative，并预留占位符防布局跳变。
IE11 不支持 position: sticky，这是原生限制，不是写法或配置问题。 它从 CSS 2.0 时代就停留在 position: fixed 和 relative 的支持上，对 sticky 的规范实现完全缺失——所有基于该属性的样式在 IE11 中都会被浏览器静默忽略，降级为 static 行为。
IE11 下 sticky 失效是必然结果，必须主动降级
你不能指望通过调整 top、改父容器 overflow 或加 z-index 让它“生效”。IE11 的渲染引擎（Trident）压根不解析 sticky 这个关键字。检查开发者工具的 Computed 面板，会发现 position 值直接显示为 static，且无任何警告提示。
- 所有现代 polyfill（如
stickybits、sticky-js）都依赖getBoundingClientRect()和scroll事件监听，它们能在 IE11 中运行，但需注意：IE11 不支持IntersectionObserver，所以基于它的 polyfill（如某些新版sticky-sidebar）会直接报错退出 - polyfill 本质是用 JavaScript 模拟行为：监听滚动 → 判断元素是否进入阈值区域 → 动态切换
position: fixed+ 手动计算top/left值 → 滚出时切回relative - 这意味着 polyfill 无法完美复现原生 sticky 的性能和边界行为（比如在
transform容器内、或嵌套iframe场景下容易错位）
推荐用 position: fixed + JS 监听滚动做轻量降级
比起引入完整 polyfill，对多数吸顶导航/侧边栏场景，更可控的做法是手动控制 fixed 状态：
- 给目标元素加一个 class（如
.js-sticky-fallback），初始设为position: relative - 用
window.addEventListener('scroll', ...)监听，结合element.getBoundingClientRect().top判断是否已滚到视口顶部（例如） - 满足条件时，动态添加
style.position = 'fixed'; style.top = '0';，并记录原始offsetTop用于回退 - 务必在
scroll回调里节流（如requestAnimationFrame包裹），否则 IE11 下滚动卡顿明显 - 不要依赖
resize事件自动重算——IE11 对resize触发不敏感，建议在 DOM 更新后手动调用一次定位校准
使用 stickybits polyfill 的注意事项
如果项目已用 Webpack 或需统一处理多处 sticky 元素，stickybits 是目前对 IE11 兼容性最稳的选择（v3.x 版本仍明确支持 IE9+）：
- 引入后需显式初始化：
stickybits('.header', { useFixed: true })，其中useFixed: true强制启用fixed模式（IE11 必须开） - 它默认把元素提至
body下，可能破坏原有 DOM 层级和样式继承，需用stickyParent选项指定容器（如{ stickyParent: document.querySelector('.layout') }） - IE11 不支持
classList.toggle的第二个参数，若 polyfill 内部有类似调用，需提前加载classlist-polyfill - 它不处理
transform: scale()等缩放场景，若页面整体被缩放（如 Windows DPI 设置 >100%），fixed 位置会偏移——此时只能放弃 polyfill，改用纯 CSSfixed+ 静态高度预留
真正麻烦的不是“怎么让它看起来像 sticky”，而是“怎么让 fixed 降级不破坏布局流”。IE11 下，fixed 元素脱离文档流，其下方内容会瞬间上移，造成视觉跳变。最稳妥的方式，是在 sticky 元素原本位置预留一个同高占位 <div class="sticky-placeholder"></div>，JS 切换 fixed 时同步显隐占位符——这点常被忽略，却直接影响用户体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
