关于滚动时Navbar背景颜色无法切换的问题求助

我帮你排查出了几个关键问题，咱们一个个来修复：

1. JavaScript 选择器的两处错误 #

你当前代码里的document.getElementsByClassName(".navbar")存在两个问题：

• getElementsByClassName的参数是类名本身，不需要加开头的.，正确写法是"navbar"而不是".navbar"
• 这个方法返回的是HTMLCollection（元素集合），不是单个DOM元素，直接访问.style会报错。你需要获取集合里的第一个元素，或者用更简洁的querySelector(".navbar")直接拿到匹配的第一个元素。

修改后的JavaScript代码：

function scrollFunction() {
  // 用querySelector直接获取.navbar元素，更直观
  const navbar = document.querySelector(".navbar");
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    navbar.style.backgroundColor = "transparent";
  } else {
    navbar.style.backgroundColor = "black";
  }
}

// 推荐用addEventListener绑定事件，比直接赋值onscroll更灵活
window.addEventListener('scroll', scrollFunction);

2. HTML 标签语法错误 #

你的汉堡菜单a标签闭合写错了：

<!-- 错误写法 -->
<a href="#" class="hamburger-li"><i class="fa fa-bars fa-2x"></i></&gt;</a>

<!-- 正确写法 -->
<a href="#" class="hamburger-li"><i class="fa fa-bars fa-2x"></i></a>

错误的闭合标签会导致HTML结构异常，可能间接影响DOM元素的选择和样式渲染。

额外优化建议 #

如果后续样式变更比较多，建议用CSS类来控制样式，而不是直接修改style属性，这样代码更易维护：

.navbar {
  /* 原有样式 */
  padding: 0;
  background-color: transparent;
  position: fixed;
  top: 0;
  width: 100%;
  transition: background-color 0.3s ease; /* 加上过渡动画更流畅 */
}

.navbar.scrolled {
  background-color: black;
}

对应的JavaScript改成：

function scrollFunction() {
  const navbar = document.querySelector(".navbar");
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    navbar.classList.remove("scrolled");
  } else {
    navbar.classList.add("scrolled");
  }
}

window.addEventListener('scroll', scrollFunction);

这样样式和逻辑分离，后续调整样式只需要修改CSS即可。

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