classList仅作用于ul中首个.nav-link元素的技术问题咨询

核心问题分析 #

1. JavaScript 逻辑问题：document.querySelector(".nav-link")仅返回页面中第一个匹配.nav-link类的元素，导致只有第一个导航链接会被修改样式，其余元素无法被选中。
2. CSS 选择器错误：.nav-link.scrolledy的样式被错误嵌套在.nav-link:hover规则内，导致只有当链接处于 hover 状态时，滚动触发的样式才会生效，不符合需求。

修正后的代码 #

JavaScript 代码 #

document.addEventListener("scroll", function() {
  // 获取所有带有.nav-link类的元素
  const navLinks = document.querySelectorAll(".nav-link");
  // 遍历所有元素，逐个添加/移除类
  navLinks.forEach(link => {
    if (window.scrollY > 0) {
      link.classList.add("scrolledy");
    } else {
      link.classList.remove("scrolledy");
    }
  });
})

CSS 代码 #

.nav-link {
  font-size: 1.2rem;
  font-weight: 800;
  transition: 0.7s ease;
  color: black;
}

.nav-link:hover {
  color: red;
}

// 单独定义滚动后的样式，脱离hover嵌套
.nav-link.scrolledy {
  color: #2196f3;
}

HTML 代码（无需修改） #

<ul class="nav-menu">
  <li class="nav-item">
    <a href="#" class="nav-link">For Individual</a>
  </li>

  <li class="nav-item">
    <a href="#" class="nav-link">For Companies</a>
  </li>

  <li class="nav-item">
    <a href="#" class="nav-link">App</a>
  </li>

  <li class="nav-item">
    <a href="#" class="nav-link">Jobs</a>
  </li>

  <li class="nav-item">
    <a href="#" class="nav-link">Contact us</a>
  </li>

</ul>

关键修正说明 #

• 用querySelectorAll替代querySelector，获取所有匹配的.nav-link元素，再通过forEach遍历处理每个元素的类名切换。
• 将.nav-link.scrolledy的样式从.nav-link:hover中移出，确保页面滚动时，无论链接是否处于 hover 状态，滚动样式都会正常生效。

内容的提问来源于stack exchange，提问作者Kiki-ko