导航栏字体颜色不会随 onscroll 功能改变

问题描述

背景颜色改变工作正常，但字体颜色不会改变。这是我的代码”：

const { value } = option;

这是 JavaScript 代码，我真的不明白。:((((((((

`<div class="navbar-container"></div>
        <nav class="navbar" id="navbar">
            <ul class="menu-links1">
                <li><a href="#" class="nav-links nav-about">O nama</a></li>
                <li><a href="#" class="nav-links nav-serv">Servisi</a></li>
                <li><a href="#" class="nav-links nav-events">Dogadjaji</a></li>
            </ul>
            <a href="" class="brand-logo"><img src="blndrlogo.png" alt=""></a>
            <ul class="menu-links2">
                <li><a href="#" class="nav-links nav-gallery">galerija</a></li>
                <li><a href="#" class="nav-links nav-loc">Lokacija</a></li>
                <li><a href="#" class="nav-links nav-contact">Kontakt</a></li>
            </ul>
       </nav>
    </div>`

解决方法

使用 for loop 将一个类添加到具有相似类的一组元素中

window.onscroll = () => {
  if (window.scrollY > 500) {
    navbar.classList.add('nav-active');
    for (var i = 0; i < navbarText.length; i++) {
      navbarText[i].classList.add('nav-text-active');
    }
  } else {
    navbar.classList.remove('nav-active');
    for (var i = 0; i < navbarText.length; i++) {
      navbarText[i].classList.remove('nav-text-active');
    }
  }
};