滚动特定像素后更改导航栏背景的代码故障求助

我来帮你排查一下代码失效的问题，你的核心逻辑方向是对的，但有两个常见的细节坑导致条件判断没有触发：

1. 滚动距离获取的兼容性问题 #

不同浏览器对滚动距离的存储对象不一致：

• 像Chrome这类浏览器，滚动距离存在document.documentElement.scrollTop中
• 部分旧浏览器或特殊环境下，滚动距离会存在document.body.scrollTop中
  你只判断了document.body.scrollTop，如果当前浏览器不使用这个属性，就永远满足不了>350的条件。

2. 变量作用域与元素存在性校验缺失 #

你在setName函数里直接给myNav赋值，但没有显式声明变量，虽然全局作用域下能生效，但这种写法容易引发意外问题；另外也没校验元素是否成功获取，如果页面中不存在id="navigation"的元素，后续代码会直接报错。

修正后的完整代码 #

// 显式声明全局变量，避免作用域歧义
let myNav;

function setName() {
  myNav = document.getElementById('navigation');
  // 提前校验元素是否存在，避免后续报错
  if (!myNav) {
    console.error('页面中未找到id为"navigation"的导航元素');
    return;
  }
}

window.onscroll = function() {
  // 兼容所有浏览器的滚动距离获取方式
  const scrollDistance = document.body.scrollTop || document.documentElement.scrollTop;
  
  if (scrollDistance > 350) {
    myNav.classList.add('nav-colored');
  } else {
    // 可选：滚动回到350像素以内时，移除类名恢复原样式
    myNav.classList.remove('nav-colored');
  }
};

window.onload = setName;

额外需要确认的点 #

• 检查HTML中是否真的存在id="navigation"的元素，注意大小写和拼写不要出错
• 确认nav-colored类的CSS样式正确生效，比如：

.nav-colored {
  background-color: #2c3e50; /* 替换成你需要的背景色 */
  transition: background-color 0.3s ease; /* 可选：添加过渡动画让切换更平滑 */
}

这样修改后，滚动到指定位置时导航栏的背景色切换应该就能正常工作了。

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