单击后无法从导航栏链接中删除 .change 类

Question

我正在尝试实现一个粘性导航栏，它在用户上下滚动页面时添加和删除 .change 类以链接元素。它似乎在大多数情况下都有效，但是，当单击链接项然后屏幕滚动时，.change 不会从单击的链接中删除。它仍然在屏幕滚动时添加和删除其他链接，但单击的链接保持更改（但是，当单击不同的链接时它确实删除，但随后新链接被 .change 卡住）。请帮助....

 <nav class="navbar center">
  <a href="#home" class="navbar-link">Home</a>
  <a href="#about" class="navbar-link">About</a>
  <a href="#projects" class="navbar-link">Portfolio</a>
  <a href="#contact" class="navbar-link">Contact</a>
 </nav>

.navbar-link {
    font-size: 1.7rem;
    font-weight: 600;
    color: whitesmoke;
    margin: 0 3rem;
    letter-spacing: .3rem;
    text-transform: uppercase;
    position: relative;
    transition: color .2s;
}

.navbar-link::before {
    content: "";
    width: 0;
    height: .2rem;
    background-color: var(--grey-color);
    position: absolute;
    right: -9%;
    bottom: -.2rem;
    transition: width .2s;
}

.navbar-link:hover {
    color: var(--grey-color)
}

.navbar-link:hover::before {
    width: 120%;
}

.change.navbar-link {
    color: var(--grey-color)
}

.change.navbar-link::before {
    width: 120%;
}

    const sections = document.querySelectorAll('section');
    const navbarLinks = document.querySelectorAll('.navbar-link');
    
    sections.forEach((section, i) => {

        if(window.pageYOffset >= (section.offsetTop - 200)) {
            navbarLinks.forEach(navbarLink =>{
                navbarLink.classList.remove('change');
                navbarLink.setAttribute("pointer-events", "none");
            })
            navbarLinks[i].classList.add('change');
        }
    });

我希望 .change 类在屏幕滚动时被删除，就像链接没有被点击时那样。我尝试专门从单击的项目中删除类以及删除指针事件，但它没有解决问题。