Firefox≤68原生不支持position:sticky，解析时直接回退为static或relative；69版起才正式支持；可用IntersectionObserver监听滚动，动态切换fixed状态模拟粘性效果。
旧版 Firefox（≤68）原生不支持 position: sticky，必须用 JavaScript 模拟或降级为 position: fixed 动态控制。
Firefox 68 及更早版本根本不解析 sticky
这些版本的 Gecko 渲染引擎尚未实现 sticky 定位规范。即使写了 position: sticky 和 top: 0，DevTools 的「Computed」面板里 position 值永远是 static 或回退到 relative，不会触发任何粘性逻辑。
- 不是 CSS 写错、不是祖先 overflow 干扰、也不是浮动塌陷——根本没进解析管线
- 可通过
getComputedStyle(el).position在控制台验证：返回值始终不是"sticky" - Firefox 69（2019 年 9 月发布）才正式启用该特性，68 及之前属于“完全无支持”
用 IntersectionObserver + fixed 模拟 sticky 行为
这是最轻量、兼容性最好、且不依赖第三方库的方案。核心思路是监听元素进入/离开视口顶部的时机，手动切换 position: fixed 状态。
- 给目标元素加一个 class（如
.js-sticky），避免污染原始样式 - 用
IntersectionObserver监听其boundingClientRect.top是否 ≤ 0 - 进入临界区时添加
style.position = "fixed"和style.top = "0"；离开时清空内联样式，交还给 CSS 流式布局 - 注意：需同步设置
width或left/right，否则fixed会丢失原有宽度（尤其 flex/grid 子项）
const stickyEl = document.querySelector('.js-sticky');
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting === false && entry.boundingClientRect.top <= 0) {
stickyEl.style.position = 'fixed';
stickyEl.style.top = '0';
stickyEl.style.width = `${stickyEl.offsetWidth}px`; // 防止收缩
} else {
stickyEl.style.cssText = '';
}
},
{ threshold: [0] }
);
observer.observe(stickyEl);
为什么不用 polyfill 库？
像 stickybits 或 sticky-js 这类老库在旧 Firefox 上反而容易出问题：
立即学习“前端免费学习笔记（深入）”；
- 它们大多依赖
getBoundingClientRect()+scroll事件轮询，在低配设备上卡顿明显 - 部分库对
transform父容器或zoom缩放处理不全，导致定位偏移 - 很多已停止维护，不兼容 Firefox 68 的 DOM API 边界行为（比如
offsetParent返回null的情况） - 直接手写
IntersectionObserver更可控，代码不到 20 行，也便于加requestAnimationFrame节流
兜底 fallback：只对旧 Firefox 启用 JS 方案
别让现代浏览器也跑模拟逻辑。用特性检测区分环境：
- 检查
CSS.supports('position', 'sticky')—— 旧 Firefox 返回false - 或用
'CSS' in window && CSS.supports('position', 'sticky')避免全局CSS未定义报错 - 只在检测失败时执行上面的
IntersectionObserver初始化逻辑 - 记得在
resize时重新测量宽度，防止横屏切换后 fixed 元素错位
真正容易被忽略的是：旧 Firefox 中 IntersectionObserver 本身也需 polyfill（68 版本支持但有 bug），建议用 W3C 官方 polyfill，它比社区版更贴近原生行为。
