JavaScript新手求助：滚动切换导航栏样式时出现Uncaught TypeError错误

错误原因 #

你遇到的Uncaught TypeError: Cannot set properties of undefined (setting 'className')，是因为页面回到顶部（滚动距离≤110）时，代码尝试获取navbar-menu__link--override类的元素，但此时这些元素已经被改回navbar-menu__link类，导致elements是空集合，elements[0]为undefined，无法设置className。

此外你的代码还有几个逻辑问题：

• 两个滚动函数的触发阈值不一致（120/110），会导致导航栏背景和文字颜色切换不同步
• 直接替换className会丢失原有类，可能引发其他样式问题
• OnScrollWindow中的循环位置错误，逻辑混乱

修复后的完整代码 #

JavaScript

window.onscroll = function() {
  handleNavbarScroll();
};

function handleNavbarScroll() {
  // 统一获取滚动距离，兼容各浏览器
  const scrollDistance = window.scrollY || document.documentElement.scrollTop;
  const navbar = document.getElementById("navbar");
  // 获取所有导航链接
  const navLinks = document.querySelectorAll(".navbar-menu__link");

  if (scrollDistance > 120) {
    // 滚动超过120px时应用样式
    navbar.style.padding = "4px 2px";
    navbar.style.backgroundColor = "#376847";
    navLinks.forEach(link => link.classList.add("navbar-menu__link--override"));
  } else {
    // 回到顶部时恢复原状
    navbar.style.padding = "10px 5px";
    navbar.style.backgroundColor = "white";
    navLinks.forEach(link => link.classList.remove("navbar-menu__link--override"));
  }
}

CSS（保持原有逻辑，调整顺序优化优先级）

.navbar-menu__link {
  color: black;
  text-transform: uppercase;
}

.navbar-menu__link--override {
  color: white;
}

HTML（无需修改）

<ul class="navbar-menu">
     <li><a class="navbar-menu__link" href="#image">images</a></li>
     <li><a class="navbar-menu__link" href="#quotes">quotes</a></li>
     <li><a class="navbar-menu__link" href="#lists">lists</a></li>
     <li><a class="navbar-menu__link" href="#alert">alerts</a></li>
     <li><a class="navbar-menu__link" href="#footer">footer</a></li>
</ul>

关键优化点 #

1. 统一滚动距离获取：用window.scrollY || document.documentElement.scrollTop兼容不同浏览器的滚动距离获取方式
2. 使用classList切换类：classList.add()/remove()不会覆盖原有类名，避免样式丢失
3. 合并滚动逻辑：将两个滚动函数合并为一个，避免重复监听，逻辑更清晰
4. 静态集合获取元素：querySelectorAll返回静态DOM集合，不会因为DOM类名变化实时更新，避免空集合问题

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