Tengo un onepager con 5 secciones, cada una con una altura mínima de 100vh y una identificación. Luego hay un div de fondo fijo que cambia su estado cuando una nueva sección entra en la ventana gráfica.

 <div class="background"></div> <section id="s1">...</section> <section id="s2">...</section> <section id="s3">...</section> <section id="s4">...</section> <section id="s5">...</section>

Quería actualizar el div de fondo con una clase con el nombre de la identificación de la sección actual cuando la sección ingresa a la ventana gráfica y eliminarla cuando la sección sale de la ventana gráfica.

Esto es lo que hice:

 const sections = document.querySelectorAll('section') const bg = document.querySelector('div.background') document.addEventListener('scroll', updateBg) function updateBg() { sections.forEach((section) => { const pixels = window.pageYOffset const sectionId = section.getAttribute('id') const offsetBottom = section.offsetTop + section.offsetHeight if (section.offsetTop <= pixels) { bg.classList.add(sectionId) } else if (offsetBottom >= pixels) { bg.classList.remove(sectionId) } else { bg.classList.remove(sectionId) } }) }

Agregar la clase actual cuando la sección ingresa a la ventana gráfica funciona bien. Pero no elimina las clases cuando las secciones han salido de la ventana gráfica como declaré en mi declaración else if (offsetBottom >= pixels) . Cuando me desplacé completamente hacia abajo en la página, tengo algo como esto:

<div class="background s1 s2 s3 s4 s5"></div>

pero lo que quiero al final es esto: <div class="background s5"></div>

¿alguna ayuda?