通过 JS 添加类无法正常工作

Question

我有下面的代码（您可以在 CodePen here 中看到它，因为由于某种原因 .navbar {position: fixed;} 在此处的代码段中不起作用），当您向下滚动时，某些 .nav-link CSS 属性必须更改。为此，我添加了一个 JS 脚本，在向下滚动时添加 .is-scrolled-down class。

不过，它似乎只对第一个 .nav-link 有效。为了让问题更明显，我将 .nav-link.is-scrolled-down 中的字体颜色更改为红色。

.nav-link适用于所有链接，为什么.nav-link.is-scrolled-down不适用？

var navbar = document.querySelector (".navbar");
var navbarlink = document.querySelector (".nav-link");
var navbarbrand = document.querySelector (".navbar-brand");
var IsScrolledDownClass = ("is-scrolled-down");
var ScrollDownClassTreshold = 50;

window.addEventListener ("scroll", function() {
  if (!navbar) return;
  if (window.scrollY >= ScrollDownClassTreshold) {
    navbar.classList.add(IsScrolledDownClass);
    navbarlink.classList.add(IsScrolledDownClass);
    navbarbrand.classList.add(IsScrolledDownClass);
    }
  else {
    navbar.classList.remove(IsScrolledDownClass);
    navbarlink.classList.remove(IsScrolledDownClass);
    navbarbrand.classList.remove(IsScrolledDownClass);
  }
});

body {
    height: 200vh;
}

.navbar {
  background-color: #105565;
    position: fixed;
    width: 100%;
    }

.navbar-brand {
  color: white;
    font-family: 'Julius Sans One';
    font-style: normal;
    font-weight: 400;
    font-size: 40px;  
}

.navbar-brand:hover {
  color: white;
}

.navbar-nav {
    margin-right: 4.4%;
}

.nav-link {
    font-family: 'roboto';
    font-size: 14px;
    font-weight: 300;
  color: white;
    text-decoration: none;
    padding-left: 12px;
    padding-right: 12px;
  padding-top: 28px;
    padding-bottom: 29px;
}

.nav-link:hover {
    color: #105565;
    background: white;
  padding-top: 29px;
    padding-bottom: 29px;
}

@media (min-width: 1001px) {
    .navbar-brand {
      padding-left: 67px;    
    margin-bottom: 3px;
        margin-left: 1.9%;
    transition: 0.4s;
    }
  .navbar.is-scrolled-down {
    padding-top: 0;
    padding-Bottom: 0;
  }
  .navbar-brand.is-scrolled-down {
    font-size: 28px;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .nav-link.is-scrolled-down {
    color: red;
    padding-top: 15px;
    padding-bottom: 12px;
  }  
}

@media (max-width: 1000px) {
    .navbar-brand {
        height: 52px;
        line-height: 52px;
        padding-top: 0;
        padding-bottom: 0;
        margin-left: 2.5%;
        transition: 0.4s;
    }
  .fas {
        color: rgba(255,255,255,1.00);
    }
  .nav-link {
    margin-top: 15px;
    margin-bottom: 14px;
  }
  .navbar-brand.is-scrolled-down {
    font-size: 28px;
    padding-top: 0.4%;
    padding-bottom: 0.3%;
    height: 40px;
    line-height: 40px;
  }
  .nav-link.is-scrolled-down {
    padding-top: 15px;
    padding-bottom: 14px;
  }
}

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <title>Navbar learning</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="responsive.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<nav class="navbar navbar-expand-lg m-0 p-0">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar Inc.</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="fas fa-bars"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#">HOME</a>
          </li>
          <li class="nav-item">
             <a class="nav-link" aria-current="page" href="#">ABOUT</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#">PORTFOLIO</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#">TEAM</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#">CONTACT</a>
          </li>
        </ul>
      </div>
  </div>
</nav>
<script src="script.js"></script>   
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>

Answer 1

仅使用 querySelector returns .nav-link 元素之一，这就是将 class 添加到一个元素的原因。

While querySelectorAll returns 所有匹配选择器的元素。然后你应该遍历结果数组并添加或删除 class

// JavaScript Document
const navbar = document.querySelector(".navbar");
const navbarlink = [...document.querySelectorAll(".nav-link")];
const navbarbrand = document.querySelector(".navbar-brand");
const IsScrolledDownClass = "is-scrolled-down";
const ScrollDownClassTreshold = 50;

addEventListener("scroll", _ => {
  if (!navbar) return;
  if (scrollY >= ScrollDownClassTreshold) {
    navbar.classList.add(IsScrolledDownClass);
    navbarbrand.classList.add(IsScrolledDownClass);
    navbarlink.forEach(link => link.classList.add(IsScrolledDownClass));
  } else {
    navbar.classList.remove(IsScrolledDownClass);
    navbarbrand.classList.remove(IsScrolledDownClass);
    navbarlink.forEach(link => link.classList.remove(IsScrolledDownClass));
  }
});

@charset "utf-8";

/* CSS Document */

body {
  height: 200vh;
}

.navbar {
  background-color: #105565;
  position: fixed;
  width: 100%;
}

.navbar-brand {
  color: white;
  font-family: 'Julius Sans One';
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
}

.navbar-brand:hover {
  color: white;
}

.navbar-nav {
  margin-right: 4.4%;
}

.nav-link {
  font-family: 'roboto';
  font-size: 14px;
  font-weight: 300;
  color: white;
  text-decoration: none;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 28px;
  padding-bottom: 29px;
}

.nav-link:hover {
  color: #105565;
  background: white;
  padding-top: 29px;
  padding-bottom: 29px;
}

@media (min-width: 1001px) {
  .navbar-brand {
    padding-left: 67px;
    margin-bottom: 3px;
    margin-left: 1.9%;
    transition: 0.4s;
  }
  .navbar.is-scrolled-down {
    padding-top: 0;
    padding-Bottom: 0;
  }
  .navbar-brand.is-scrolled-down {
    font-size: 28px;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .nav-link.is-scrolled-down {
    color: red;
    padding-top: 15px;
    padding-bottom: 12px;
  }
}

@media (max-width: 1000px) {
  .navbar-brand {
    height: 52px;
    line-height: 52px;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 2.5%;
    transition: 0.4s;
  }
  .fas {
    color: rgba(255, 255, 255, 1.00);
  }
  .nav-link {
    margin-top: 15px;
    margin-bottom: 14px;
  }
  .navbar-brand.is-scrolled-down {
    font-size: 28px;
    padding-top: 0.4%;
    padding-bottom: 0.3%;
    height: 40px;
    line-height: 40px;
  }
  .nav-link.is-scrolled-down {
    padding-top: 15px;
    padding-bottom: 14px;
  }
}

<nav class="navbar navbar-expand-lg m-0 p-0">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar Inc.</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="fas fa-bars"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="#">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="#">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="#">PORTFOLIO</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="#">TEAM</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="#">CONTACT</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>

通过 JS 添加类无法正常工作

Adding classes through JS not working properly

javascript

css

class

navbar

通过 JS 添加 类 无法正常工作

Adding classes through JS not working properly

javascript

css

class

navbar

通过 JS 添加类无法正常工作