javascript - 当用户滚动到新部分时，我需要使用 addEventListener 向部分添加“活动”类

Question

当用户将部分滚动到视口时，我想向这些部分添加一个“活动”类，以便向用户显示他们所在的部分。我已经编写了下面的代码，但它不起作用。请帮忙。

const sections = document.querySelectorAll('section');

window.addEventListener('scroll', function scrolling() {
    sections.forEach((section) => {
        if (isInViewport(section)) {
            section.classList.add('active');
        } else {
            section.classList.remove('active');
        }
    });
});

<header class="page__header">
    <nav class="navbar__menu">
      <!-- Navigation starts as empty UL that will be populated with JS -->
      <ul id="navbar__list"></ul>
    </nav>
  </header>
  <main>
    <header class="main__hero">
    
    <section id="section1" data-nav="Section 1" class="your-active-class">
      <div class="landing__container">
        <h2>Section 1</h2>
        <p>Lorem ipsum dolor sit amet.</p>

        <p>Aliquam a convallis justo. .</p>
      </div>
    </section>
    <section id="section2" data-nav="Section 2" class="your-active-class">
      <div class="landing__container">
        <h2>Section 2</h2>
        <p>Lorem ipsum dolor sit amet.</p>

        <p>Aliquam a convallis justo.n.</p>
      </div>

标签： javascripthtmlcss