• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

111
Views
Cómo determinar la sección que está más cerca de la parte superior

Hice una página de destino de varias secciones con una barra de navegación que contiene los enlaces a las secciones de la página. Necesito dar una clase activa al enlace de la sección más cercana a la parte superior de la página. Intenté usar el detector de eventos de desplazamiento, pero es no funciona correctamente

// responde al desplazamiento dando el estado activo de la barra de navegación para la sección actual

 ``document.addEventListener("scroll", function() { const scrollPos = document.body.scrollTop; let pos = 0; for (let i = 0; i < sec.length; i++) { // determining pos of current section pos+=sec[i].offsetHeight ; let secPos = sec[i].getBoundingClientRect().y; secPos - scrollPos <= 0 && secPos + pos >= scrollPos ? list[i].classList.add("active") : list[i].classList.remove("active") } });```
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

El evento de desplazamiento funciona correctamente, pero su código no aborda correctamente la lista de elementos que está iterando.

solo intente cambiar list[] a sec[]

 document.addEventListener( "DOMContentLoaded", function() { let sec = document.querySelectorAll('section'); console.log(sec); sec[0].classList.add("active") document.addEventListener("scroll", function() { const scrollPos = document.body.scrollTop; let pos = 0; for (let i = 0; i < sec.length; i++) { // determining pos of current section pos+=sec[i].offsetHeight ; let secPos = sec[i].getBoundingClientRect().y; if ((secPos - scrollPos <= 0) && (secPos + pos >= scrollPos)) sec[i].classList.add("active"); else sec[i].classList.remove("active"); } }) })
 section { font-size: 80px; text-align: center; width: 300px; margin: 20px auto; background-color: pink; border: 1px solid red; } section.active { border: 1px solid blue; background-color: cyan; }
 <section>1</section> <section>2</section> <section>3</section> <section>4</section> <section>5</section> <section>6</section> <section>7</section> <section>8</section>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error