如何基于页面滚动百分比实现图片从顶部垂直移动到底部

核心思路 #

• 先明确两个核心计算逻辑：
  1. 页面滚动百分比 = 当前滚动距离 / （文档总高度 - 视口高度），这个值范围是0-1，0对应页面顶部，1对应滚动到底部
  2. 图片可移动的总距离 = 视口高度 - 图片自身高度，保证图片最终底部刚好贴合视口底部，不会超出
• 图片采用fixed定位，相对于视口固定水平位置，仅修改top值实现垂直移动
• 监听窗口resize事件，动态更新核心参数，适配窗口大小变化

前置CSS配置 #

#myimg {
  position: fixed;
  top: 0;
  left: 20px; /* 可自行调整水平位置，居中可改为 left: 50%; transform: translateX(-50%); */
  z-index: 999; /* 避免被其他元素遮挡 */
}

完整JS代码 #

const imgScroll = document.getElementById('myimg');
let docHeight = 0;
let viewportHeight = 0;
let scrollTotal = 0;
let imgMoveTotal = 0;

// 统一更新核心参数的函数
function updateParams() {
  // 兼容不同浏览器获取文档总高度
  docHeight = Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.body.clientHeight,
    document.documentElement.clientHeight
  );
  viewportHeight = window.innerHeight;
  // 页面可滚动的总距离
  scrollTotal = docHeight - viewportHeight;
  // 图片可移动的总距离
  imgMoveTotal = viewportHeight - imgScroll.offsetHeight;
}

// 滚动时更新图片位置
function updateImgPosition() {
  if (scrollTotal <= 0) return; // 页面无滚动空间时不处理
  const scrollPercent = window.scrollY / scrollTotal;
  // 用requestAnimationFrame优化渲染性能，避免滚动卡顿
  requestAnimationFrame(() => {
    imgScroll.style.top = `${scrollPercent * imgMoveTotal}px`;
  });
}

// 页面加载完成后初始化参数
window.addEventListener('load', () => {
  updateParams();
  updateImgPosition();
});

// 窗口大小变化时重新计算参数
window.addEventListener('resize', updateParams);

// 监听滚动事件
window.addEventListener('scroll', updateImgPosition);

原有方案问题说明 #

• 第一个方案失效是因为系数0.1323是针对特定分辨率计算的固定值，更换设备或调整窗口大小就会出现错位
• 第二个方案失效是因为代码里写死了滚动区域总高度为1000px，没有适配实际页面的真实高度

内容的提问来源于stack exchange，提问作者SA.93