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

0

170
Views
Aumente la opacidad de los elementos secundarios cuando alcance el borde superior del contenedor principal en el desplazamiento

Inicialmente, la opacidad del elemento secundario se establece en 0, excepto para el primer elemento secundario que ya está en la parte superior, y cuando el desplazamiento pasa al siguiente elemento secundario en llegar a la parte superior del contenedor principal, la opacidad se establecerá en 1 y lo mismo sucede para el resto del niño.

 <div class="parent"> // scrollable parent container <div class="child">I am child 1</div> // currently visible child with opacity 1 <div class="child">I am child 2</div> // next child element with opacity 0.5 <div class="child">I am child 3</div> // next child element with opacity 0.5 ..... </div>

He visto esta publicación Aumentar la opacidad del elemento cuando el usuario se desplaza hacia abajo en la página , pero esta es jquery. No puedo encontrar algo similar para javascript puro y también esto solo contiene un elemento secundario.

No sé por dónde empezar. Cualquier ayuda es muy apreciada.

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Bien, después de varias horas de intentarlo/buscar. Finalmente pude resolverlo. Publicaré mi solución para que pueda ayudar a otros que tendrán el mismo caso de uso conmigo.

 const parentContainer = document.getElementById('parent'); parentContainer.addEventListener( 'scroll', event => { [].slice.call(event.target.children).map(el => { if (el.offsetTop - 100 < event.target.scrollTop) { el.style.opacity = 1 - ((el.clientHeight - event.target.scrollTop) / el.clientHeight) * 0.7 + 0.3; } else { el.style.opacity = 0.3; } }); } )

Lo que hice anteriormente es obtener el elemento principal y agregar un detector de eventos de scroll . Asigne a través de sus elementos secundarios y luego obtenga el valor offsetTop secundario y compárelo con el valor scrollTop principal, si es menor que aplique la lógica que encontré en el enlace de referencia anterior para aumentar la opacidad, de lo contrario (al desplazarse hacia arriba) vuelva a la opacidad predeterminada.

Espero que esto sea claro para cualquiera que busque la misma solución.

about 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