我试图使它，当您滚动我的HTML页面时，当您到达某个部分时，相应的部分应该变为活动的，
例如：

<nav class="scrollmenu">
  <ul>
    <li class="starters"><a href="#starters">STARTERS</a></li>
    <li class="ramen"><a href="#ramen">RAMEN</a></li>
 </ul>
</nav>

当您到达页面上的此部分时，初学者应处于活动状态：第一个月
我试着用这个JS代码来做这件事：

const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll("nav ul li");

window.addEventListener("scroll", () => {
  let current = " ";
  sections.forEach((section) => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    if (scrollY >= sectionTop) {
      current = section.getAttribute("id");
    }
  });

  navLi.forEach((li) => {
    li.classList.remove("active");
    if (li.classList.contains(current)) {
      li.classList.add("active");
    }
  });

}）;
我仍然要扩展这个JS代码，使它更好地工作，但如果我没有弄错，它应该已经使类可视化活动时，我在右边的部分。
如果你想知道我的CSS看起来像这样的时间：

nav ul li:active {
  background-color: blue;
}