I need to add an 'active' class to sections using addEventListener when the user scrolls to new section

Question

I want to add an 'active' class to the sections when the user scrolls the section into the viewport so it shows the user what section they are in. I have written the code below but it does not work. Help please.

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>