javascript - 关于 JS 和 Class 的问题

Question

我试图缩小标题并确定了它，但是当我单击导航项“项目”部分时，直到我滚动时才从 JS 脚本中获取类名。这是我的代码。

网站：[https://yigitceli.github.io][1]

除了“项目”导航项之外，这里一切正常。当我从浏览器中检查项目时，在单击之后滚动之前，我注意到“项目”导航项目没有从 js 获取类。我认为问题出在 JS 脚本中。

编辑：我注意到现在在网站“项目”导航项或“联系人”导航项的开头从 javascript 随机获取类名。

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

function scrollFunction() {
  if (window.pageYOffset > 30) {
    var navItems = document.getElementsByClassName("nav-items");
    for (let i = 0; i < navItems.length; i++) {
      navItems[i].className = "nav-items2";
    } 
    var navs = document.getElementsByClassName("nav-list");
    for (let i = 0; i < navs.length; i++) {
      navs[i].className = "nav-list2";
    }
    document.querySelector("h1").classList.add("h1");
    document.querySelector("header").id = "header2";
  } else {
    var navs = document.getElementsByClassName("nav-list2");
    for (let i = 0; i < navs.length; i++) {
      navs[i].className = "nav-list";
    }
    var navItems = document.getElementsByClassName("nav-items2");
    for (let i = 0; i < navItems.length; i++) {
      navItems[i].className = "nav-items";
    }
    document.getElementsByClassName("h1")[0].classList.remove("h1");
    document.getElementById("header2").id = "";
  }
}

h1 {
  width: 35%;
  font-size: 2.5em;
  font-weight: 100;
  transition: 1s ease-in;
}
.h1 {
  color: #807d78;
  font-size: 1.5em;
  font-weight: bold;
  transition: 1s ease-in;
}

nav {
  display: flex;
  align-items: center;
  width: 65%;
}
nav ul {
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
}
.nav-items {
  padding-left: 15%;
  font-size: 1.3em;
  transition: 1s ease-in;
}
.nav-items2 {
  padding-left: 10%;
  font-size: 1em;
  transition: 1s ease-in;
  font-weight: bold;
}
.nav-list {
  color: seashell;
  text-decoration: none;
  transition: color 1s ease-in;
}
.nav-list2 {
  text-decoration: none;
  color: #807d78;
  transition: color 1s ease-in;
}
.nav-list:hover {
  padding-bottom: 5%;
  border-bottom: 0.12em seashell solid;
}
.nav-list2:hover {
  padding-bottom: 5%;
  border-bottom: 0.12em #807d78 solid;
}

<header id="header">
    <h1>Yiğit Balceli</h1>
    <nav id="nav">
      <ul>
        <li class="nav-items"><a class="nav-list" href="#about-me">About Me</a></li>
        <li class="nav-items"><a class="nav-list" href="#project-rows">Projects</a></li>
        <li class="nav-items"><a class="nav-list" href="#footer">Contact</a></li>
      </ul>
    </nav>
  </header>

标签： javascripthtmlcss