滚动时背景图透明度降至0.5并限制最小值的实现问题

问题根源 #

你之前用Math.max()导致所有页面透明度锁死在0.5，本质是没区分「着陆页内滚动」和「离开着陆页」两种场景——直接全局限制最小值，会把着陆页内本该从1过渡到0.5的动态计算值也强制拉到0.5，自然就看不到变化了。

正确实现思路 #

核心要分两种状态处理：

• 在着陆页范围内：随着滚动距离增加，背景透明度从1线性降到0.5
• 完全离开着陆页：透明度固定为0.5；如果滚回着陆页，透明度再从0.5回升到1

这里的「着陆页范围」默认按浏览器视口高度（首屏）算，如果你有自定义高度的着陆区块，直接替换成对应元素的高度即可。

完整代码 #

// 获取背景元素（替换成你实际的选择器）
const bgElement = document.querySelector('.hero-bg');
// 定义着陆页高度（首屏高度，或自定义区块高度）
let landingHeight = window.innerHeight;
// 最低透明度阈值
const minOpacity = 0.5;

// 滚动处理函数
function adjustBgOpacity() {
  const scrollDistance = window.scrollY;
  
  let opacity;
  if (scrollDistance < landingHeight) {
    // 线性计算透明度：滚到着陆页底部时刚好降到0.5
    opacity = 1 - (scrollDistance / landingHeight) * (1 - minOpacity);
  } else {
    // 离开着陆页后固定最低透明度
    opacity = minOpacity;
  }
  
  bgElement.style.opacity = opacity;
}

// 初始化设置透明度为1
bgElement.style.opacity = '1';
// 绑定滚动监听
window.addEventListener('scroll', adjustBgOpacity);
// 窗口大小变化时更新着陆页高度（避免窗口resize后计算错误）
window.addEventListener('resize', () => {
  landingHeight = window.innerHeight;
});

自定义适配 #

如果你的着陆页不是整屏，比如是一个带class为landing-section的区块，只需修改着陆页高度的获取方式：

const landingSection = document.querySelector('.landing-section');
let landingHeight = landingSection.offsetHeight;

性能优化（可选） #

滚动事件会频繁触发，添加节流函数减少计算次数：

// 节流函数：每16ms（约60帧）执行一次
function throttle(func, delay = 16) {
  let timer = null;
  return (...args) => {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

// 用节流后的函数绑定滚动事件
window.addEventListener('scroll', throttle(adjustBgOpacity));

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