The CSS and HTML elements build different sections of this landing page, which I am manipulating from the DOM. I am building a code to highlight the section currently in the viewport along with highlighting the nav element in view using Javascript. I did that by getting dimensions via getBoundingClientRect() and then add "active-class" using classlist. However, the active section is not working on my project. I already tried debugging the project.

When I scroll, a section in view does not get highlighted.

The project repository is located here: https://github.com/Himanshukumar30/Landing-Page

  // Check the section in view
    
    function sectionInView () {
        const position = element.getBoundingClientRect();
        return (position.top <= 150 && position.bottom >= 150);
    }
    
    // Set sections as active
    
    function activeClass() {
     for (section of sections) {
       if (sectionInView(section)) {
    
            // Add "active-class" to section in view port
                section.classList.add("active-class");
                
            } else {
    
                // Remove "active-class" from section not in view port
                section.classList.remove("active-class");
            }
        }
    }
    
    // Function call to show active section in view
    document.addEventListener("scroll", function() {
        activeClass();
      });

I tried adding active-class manually, it still didn't work.

When I log section in console, it gives following error:

63app.js:32 Uncaught ReferenceError: element is not defined
at sectionInView (app.js:32:22)
at activeClass (app.js:39:13)
at HTMLDocument.<anonymous> (app.js:54:5)