fixed定位元素跟随内容滚动：CSS与JS实现

先说几个核心判断：fixed 元素不随内容滚动，这不是 bug，而是它自带的出厂设置。

CSS 中的 position: fixed，设计初衷就是脱离文档流、相对于视口定位。说白了，它天生就该“钉”在屏幕的某个角落不动弹。所以你发现它纹丝不动，不是写错了，而是它本身就是这么设计的。想让它跟着内容一起滚动？那就得绕开纯 CSS 方案，请 JavaScript 来帮忙。

fixed元素不随内容滚动是正常行为，不是bug

再强调一次：这不是异常，这就是 position: fixed 的本质。如果某天你发现一个 fixed 元素非得自己跟着页面滚，那才叫出了问题。

用 window.addEventListener('scroll', ...) 实时修正 top 值

核心思路非常直接：把本身写死的 top 值，替换成 JS 动态计算出来的数值。标准做法是记录元素的原始偏移量（比如它距离页面顶部的距离），然后在滚动时用 window.scrollY 去做补偿。

• 第一步，用 getBoundingClientRect() 或 offsetTop 获取元素的初始位置（推荐前者，更稳定，也更可靠）。
• 第二步，在 scroll 的回调函数里，将 element.style.top 设置为 (initialTop - window.scrollY) + 'px'。
• 这里有个关键：一定要加上 will-change: top，或者直接改用 transform: translateY(...)。否则频繁的样式修改会引发重排，滚动会变得卡顿，肉眼可见。
• 千万别忘了做节流处理。直接绑定 scroll 事件，一秒钟能触发几百次回调，性能堪忧。用 requestAnimationFrame 包一层，会稳妥得多。

用 position: sticky 替代 fixed？看场景再决定

如果目标仅仅是“滚动到某个位置之后就固定住”，那么 position: sticky 是更轻量、原生且性能优异的选择。但它和 fixed 有本质区别，这一点必须搞清楚。

• sticky 仍然属于文档流，它会占据页面空间；而 fixed 则是完全脱离文档流。
• sticky 只能在父容器范围内生效，并且它的父容器不能有 overflow: hidden 或 transform 属性（否则会直接失效）。
• sticky 不支持同时设置 bottom 和 top，在不同浏览器下的行为也不一致；而 fixed 则没有这个限制。
• 兼容性方面要注意：Safari 从 iOS 15.4 和 macOS 12.3 才开始修复 sticky 的部分 bug，旧版本上依然存在抖动或失效的可能。

滚动中修改 top 导致布局抖动？试试 transform

直接修改 style.top 会触发 layout → paint → composite 的完整流程，尤其在低端设备上，肉眼可见的跳动非常明显。而换成 transform: translateY(...)，它走的是合成层，性能要高出好几个档次。

• 将 element.style.top = ... 改写成 element.style.transform = 'translateY(' + (initialTop - window.scrollY) + 'px)'。
• 记得提前开启硬件加速：will-change: transform，或者直接写 transform: translateZ(0)。
• 注意：如果元素本身已经使用了 transform（比如一个旋转效果），那么多项 transform 值必须合并到一起写，不能互相覆盖。
• 另外，不要在滚动回调中频繁通过 getBoundingClientRect().top 读取值——这个操作本身会触发同步 layout，反而会加重卡顿。

从实战来看，滚动逻辑看似简单，实际上要同时兼顾定位精度、滚动性能、父容器约束以及兼容性兜底，每个环节都有容易忽略的细节。尤其是用 transform 替代 top 这一步，很多人试了第一版觉得卡顿就直接放弃了，其实只差那一行 will-change 而已。