Los elementos CSS y HTML construyen diferentes secciones de esta página de destino, que estoy manipulando desde el DOM. Estoy creando un código para resaltar la sección actualmente en la ventana gráfica junto con resaltar el elemento de navegación a la vista usando Javascript. Lo hice obteniendo dimensiones a través de getBoundingClientRect() y luego agregué "clase activa" usando classlist. Sin embargo, la sección activa no funciona en mi proyecto. Ya intenté depurar el proyecto.

Cuando me desplazo, una sección a la vista no se resalta.

El repositorio del proyecto se encuentra aquí: 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(); });

Intenté agregar la clase activa manualmente, todavía no funcionó.

Cuando registro la sección en la consola, da el siguiente 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)