滚动页面时更改图像位置

<div id="container">
  <img id="image" src="image.jpg" alt="滚动图像">
</div>

#container {
  height: 1000px; /* 设置容器高度，使页面可以滚动 */
  position: relative; /* 设置容器为相对定位，以便于图像绝对定位 */
}

#image {
  position: absolute; /* 设置图像为绝对定位，以便于改变其位置 */
  top: 0; /* 初始位置为页面顶部 */
  left: 0; /* 初始位置为页面左侧 */
}

window.addEventListener('scroll', function() {
  var image = document.getElementById('image');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop; // 获取页面滚动距离

  // 根据滚动距离改变图像位置
  image.style.top = scrollTop + 'px';
});