Tengo cinco secciones en mi página y estoy tratando de agregar la clase "activa" a la sección en el puerto de visualización. Probé este código pero no funciona correctamente. el código guarda todos los elementos con el nombre de etiqueta "sección" en una lista de nodos y luego creó una matriz de esta lista, recorrí la matriz y agregué un detector de eventos para cada elemento, luego probé si el elemento está en la ventana gráfica, así que yo agregue la clase, de lo contrario, elimino la clase. el problema es que una vez que se desplaza la página, las cinco secciones tendrán la clase "activa", lo que significa que varios elementos tienen la clase "activa" al mismo tiempo, aunque solo se ve una sección en el puerto y cuando sigo desplazándome hacia abajo, las secciones que se mueven hacia arriba fuera de la ventana gráfica tienen su clase "activa" eliminada. ¿Cómo puedo tener un elemento con la imagen de código "activa" de clase a la vez?

 //values of viewport const viewWidth = document.documentElement.clientWidth; const viewHeight = document.documentElement.clientHeight; //set class active to section in viewport function sectionInView(x) { for (let i = 0; i in x; i++) { document.addEventListener("scroll", function () { let el = x[i].getBoundingClientRect(); if (el.top >= 0 && el.left >= 0 && el.bottom <= viewHeight && el.right <= viewWidth) { x[i].setAttribute("class", "active your-active-class"); } else { x[i].removeAttribute("class", "active your-active-class"); } }); } } sectionInView(sectionListArray);