JavaScript实现滚动切换body背景图：回滚时背景未恢复的问题求助

你的代码逻辑本身没问题，但滚动回顶部时背景图不恢复，大概率是背景图路径错误，或者可以通过优化代码避免不必要的DOM查询：

修正后的代码 #

// 提前缓存body元素，避免每次滚动都重复查询DOM
const body = document.querySelector("body");

function changeBg() {
  // 根据滚动距离切换背景图
  if (window.scrollY > 1000) {
    body.style.backgroundImage = "url('../../../img/upa/landing/images/bg.jpg')";
  } else {
    body.style.backgroundImage = "url('../../../img/upa/landing/images/bg-2.jpg')";
  }
}

// 绑定滚动事件
window.addEventListener("scroll", changeBg);

关键排查点 #

• 路径验证：把bg-2.jpg的路径复制到浏览器地址栏，看能否正常打开图片。如果打不开，说明相对路径和当前页面的位置不匹配，需要调整路径。
• DOM缓存优化：将body元素的查询放在函数外部，减少滚动时的重复DOM操作，提升性能。
• CSS语法规范：给URL加上单引号，避免路径中出现特殊字符时导致解析错误。

如果路径确认正确，可以在changeBg函数里添加console.log(window.scrollY)，滚动页面时查看控制台输出的数值，确认判断逻辑是否正常触发。

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