如何用JavaScript实现滚动时图片透明度降低的淡出效果？

你的当前代码会直接将图片透明度在滚动进度0.25处硬切换（从1跳变到0），无法实现自然的淡出过渡。要达到平滑的淡出效果，需要在指定的滚动区间内线性调整透明度值，而非直接切换。

优化后的代码实现 #

// 提前获取图片元素，避免每次滚动都重复查找
const myImage3 = document.getElementById('wheat-image-main3');

// 防抖函数，优化滚动事件性能（可选但推荐）
function debounce(func, delay = 10) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// 处理滚动逻辑的函数
function handleScroll() {
  const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
  const totalScrollableHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrollPercent = totalScrollableHeight > 0 ? scrollTop / totalScrollableHeight : 0;

  // 设置淡出的滚动区间：比如从滚动进度20%（0.2）开始，到40%（0.4）完全透明
  const fadeStart = 0.2;
  const fadeEnd = 0.4;

  let opacity;
  if (scrollPercent <= fadeStart) {
    opacity = 1; // 未进入淡出区间，保持完全显示
  } else if (scrollPercent >= fadeEnd) {
    opacity = 0; // 超出淡出区间，完全透明
  } else {
    // 计算区间内的线性透明度值
    opacity = 1 - ((scrollPercent - fadeStart) / (fadeEnd - fadeStart));
  }

  myImage3.style.opacity = opacity;
}

// 绑定滚动事件，使用防抖优化
window.addEventListener('scroll', debounce(handleScroll));

关键改进点 #

• 避免重复DOM查询：将图片元素的获取放在滚动事件外，提升性能
• 平滑过渡逻辑：通过线性公式计算区间内的透明度，实现自然的淡出效果
• 防抖优化：减少滚动事件的触发频率，避免频繁计算导致的性能问题
• 边界处理：当页面无滚动空间时（totalScrollableHeight为0），避免出现NaN计算错误

你可以根据需求调整fadeStart和fadeEnd的数值，控制淡出效果的起始和结束滚动位置。

内容的提问来源于stack exchange，提问作者Mahmoud Kattan