JS实现滚动时图片淡入效果 页面加载时图片仍显示如何解决

• 你绑定的逻辑仅在scroll事件触发时执行，页面初始加载阶段没有触发滚动事件，不会主动给.sticky-logo-fade-in元素设置opacity属性，元素默认opacity为1，所以初始处于可见状态
• 原代码的opacity计算逻辑存在问题：滚动距离小于等于500px时计算出的opacity值范围是0 ~ -1，opacity不支持负值，会被浏览器默认识别为0，这也是滚动初期图片直接消失的原因

步骤1：添加默认CSS样式 #

给目标元素设置初始透明度为0，可选加过渡效果让淡入更自然：

.sticky-logo-fade-in {
  opacity: 0;
  /* 可选：添加平滑过渡效果 */
  transition: opacity 0.25s linear;
}

步骤2：调整JS逻辑 #

把透明度更新逻辑抽为公共函数，页面加载完成后立即执行一次，同时修正opacity的计算逻辑：

const checkpoint = 500;
const logo = document.querySelector(".sticky-logo-fade-in");

function updateLogoOpacity() {
  const currentScroll = window.pageYOffset;
  let opacity;
  if (currentScroll <= checkpoint) {
    // 滚动距离从0到500时，透明度从0升到1，实现渐变效果
    opacity = currentScroll / checkpoint;
  } else {
    opacity = 1;
  }
  logo.style.opacity = opacity;
}

// 页面加载完成后立即执行一次，初始化透明度
window.addEventListener("load", updateLogoOpacity);
// 滚动时触发更新
window.addEventListener("scroll", updateLogoOpacity);

如果不需要渐变效果，只要滚动超过500px直接显示，可将updateLogoOpacity里的判断逻辑简化为：

opacity = currentScroll > checkpoint ? 1 : 0;

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