Algunos pequeños problemas, pero estás en el camino correcto.

En primer lugar, intente usar getBoundingClientRect().top , que debería darle una distancia en px desde la parte superior de la ventana hasta el elemento.

En segundo lugar, debe llamar a sus funciones para que funcionen. Debe llamar a AddActiveClass cada vez que se desplaza la ventana para que haga sus comprobaciones cada vez que las secciones se mueven hacia arriba o hacia abajo en la página.

En tercer lugar, está agarrando todas las section de la página, pero solo está usando la primera; supongo que esto es solo un código de prueba y desea verificar todas las secciones (en cuyo caso usaría sections[s] en su código - la matriz de secciones usando s índice de bucle.

finalmente, verifique su lógica: su verificación top >= 0 agregará la clase a cada sección debajo de la parte superior de la página; es posible que desee hacer algo como top > 0 && top < 100 para golpear solo las secciones cerca de la parte superior de la página, o agregue una marca para que solo se agregue la clase a una sección.

Una idea aproximada de cómo debería verse su código, puede necesitar un par de ajustes:

 // on window scroll window.addEventListener('scroll', (e) => { // get all sections on the page const sections = document.querySelectorAll('section'); // loop through each section sections.forEach( section => { // get px distance from top const topDistance = section.getBoundingClientRect().top; // if the distance to the top is between 0-100px if (topDistance > 0 && topDistance < 100) { section.classList.add('your-active-class'); // otherwise, remove the class } else { section.classList.remove('your-active-class'); } }); });

Tuviste un par de errores en tu código. Revisa el fragmento, debería hacer la magia. Y si tiene más preguntas, solo envíeme un ping e intentaré elaborar mi código:

 const sections = document.querySelectorAll('section'); const isInViewport = (section) => { const { top } = section.getBoundingClientRect(); section.classList.toggle('active', top >= 0); } const toggleActiveClass = () => { sections.forEach(isInViewport); } document.addEventListener('scroll', toggleActiveClass);

 section { background-color: red; height: 200px; } section.active { background-color: green; }

 <section>#1</section> <section>#2</section> <section>#3</section> <section>#4</section> <section>#5</section> <section>#6</section> <section>#7</section>

Este es mi enfoque a su problema.

Por supuesto, debe eliminar el CSS que usé para fines de demostración, y también debe eliminar el código que uso dentro de AddActiveClass que usé para comprender mejor lo que hice. El código a eliminar es el siguiente:

 var span = section.querySelector('span'); span.innerText = distanceFromTop + ' - Greater Than Or Equal to O: ' + (distanceFromTop >= 0); 

 function AddActiveClass() { const sections = document.querySelectorAll('section'); sections.forEach( function(section) { var distanceFromTop = section.getBoundingClientRect().top; var span = section.querySelector('span'); span.innerText = distanceFromTop + ' - Greater Than Or Equal to O: ' + (distanceFromTop >= 0); if( distanceFromTop >= 0) { section.classList.add("your-active-class"); } else { section.classList.remove("your-active-class"); } } ); } document.addEventListener('scroll', AddActiveClass); AddActiveClass();

 section { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } section:nth-child(1) {background :#0AF;} section:nth-child(2) {background :#A0F;} section:nth-child(3) {background :#AF0;} section:nth-child(4) {background :#FA0;} section:nth-child(5) {background :#F0A;} section:nth-child(6) {background :#0FA;} section span { font-size: 32px; font-weight: bold; color: #FFF; text-shadow: 0px 0px 3px #000000,-2px -2px 3px #FF0000,2px 2px 3px #00FF00,-2px 2px 3px #0000FF; } section.your-active-class { background: rgb(2,0,36); background: linear-gradient(41deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); }

 <section><span>0</span></section> <section><span>0</span></section> <section><span>0</span></section> <section><span>0</span></section> <section><span>0</span></section> <section><span>0</span></section>