图片跟随滚动条移动需用JavaScript监听scroll事件，通过transform: translateY()或background-position-y动态更新位置，配合节流、比例偏移和硬件加速实现高性能视差效果。
图片跟随滚动条移动，本质是让图片位置随页面垂直滚动距离动态变化，不是固定在视口某处（那是 position: fixed），也不是条件粘滞（position: sticky）。它需要 JavaScript 监听 scroll 事件，实时计算并更新图片的 transform: translateY() 或 background-position-y。
用 window.addEventListener('scroll', ...) 动态更新 transform
这是最通用、兼容性好、性能可控的方式。核心逻辑是：滚动距离越大，图片向下偏移越多（或越少），形成“视差”或“跟随”感。
- 必须用
transform（而非top/margin-top），否则会触发重排，滚动卡顿 - 推荐节流处理，比如用
requestAnimationFrame包裹更新逻辑，避免高频触发 - 偏移量通常按比例计算，例如
offsetY = window.scrollY * 0.5表示图片移动速度是滚动速度的一半 - 记得给图片设
position: relative或absolute，否则transform可能不生效或影响布局
对背景图用 background-position-y 实现滚动跟随
如果图片是作为某个容器的 background-image，直接改 background-position-y 更轻量，且 CSS 自动硬件加速。
- 容器需设
background-attachment: scroll（默认值，但显式声明更稳妥） - 监听
scroll后，设置element.style.backgroundPositionY = scrollY + 'px'即可 - 若想反向跟随（如向上滚动时背景图向下移），用负号：
-scrollY + 'px' - 注意：Safari 对
background-position动态更新的渲染有时有延迟，加will-change: background-position可缓解
为什么不用 position: sticky 或 fixed
这两个定位方式都不满足“随滚动条线性移动”的需求。
立即学习“前端免费学习笔记（深入）”；
-
position: sticky只在父容器内达到临界点时才“粘住”，超出后就恢复文档流——它不会持续响应滚动距离 -
position: fixed始终相对于视口，滚动时坐标不变，完全不“跟随”滚动条 - 误用它们会导致图片突然消失、错位，或只在局部区域生效
移动端要注意 Safari 的滚动行为差异
iOS Safari 在地址栏收放时会重置 window.scrollY，导致图片位置跳变；同时其滚动事件触发频率低、有延迟。
- 不要依赖首次
scroll事件获取初始位置，应在DOMContentLoaded或load时读取window.scrollY - 避免在滚动中直接修改
img.src或切换class，容易触发 layout thrashing - 如需高精度跟随，可结合
IntersectionObserver判断元素是否在视口，再配合scroll微调
真正难的不是写几行 scroll 监听，而是控制偏移节奏、处理边界跳变、兼顾低端机性能——这些细节不调试到真机上根本看不出来。
