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

0

320
Views
¿Cómo cambiar el elemento fijo dependiendo de desplazarse por varias secciones en JS/jQuery?

Necesito cambiar la imagen adhesiva (cambiando la clase o cambiando el atributo de URL) mientras me desplazo por varias secciones de texto. Asana en su página de inicio tiene un ejemplo exacto

mira la animación gif aquí

Delante de la sección de texto 1 - imagen 1, mientras nos desplazamos cerca de la sección de texto 2 - la imagen cambia a la segunda, y así sucesivamente. Al desplazarse de nuevo a la parte superior, la misma lógica, cada imagen aparece delante de su sección de texto.

Si solo hubiera 1 punto de interrupción, usé un código como este:

 $(window).scroll(function () { if ($(window).scrollTop() >= offset) { $(".image").addClass("active"); } else { $(".image").removeClass("active"); } });

Pero como podría haber muchas más secciones, necesito otra solución.

¿Algunas ideas? Gracias por adelantado.

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

0

Creo que este es el patrón que estás buscando:

 $(window).scroll(function () { image1(); image2(); image3(); }); function image1() { var min = 0; var max = 400; if(window.scrollY >= min && window.scrollY < max) { $("img").attr("src","https://cdn.picpng.com/head/head-the-dummy-avatar-man-tie-72756.png"); } } function image2() { var min = 400; var max = 800; if(window.scrollY >= min && window.scrollY < max) { $("img").attr("src","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlfO4xTPtZVZfQCZqpaoOV4_c3G-OMUJ00IU0fy8wnDOZzud3N2xYnMrzJbXLCs7vlmWM&usqp=CAU"); } } function image3() { var min = 800; var max = 10000; if(window.scrollY >= min && window.scrollY < max) { $("img").attr("src","https://www.unite2canada.com/images/dummy-user.png"); } }

Puedes ver este fragmento de código en funcionamiento aquí mismo

about 3 years ago · Juan Pablo Isaza Report

0

Tal vez para alguien sea útil, así que publicaré mi solución. Gracias a Alex, cambié la lógica: dejé solo una imagen y en el desplazamiento, cambio src attr.

 $(window).scroll(function () { let index, txtPosition, imgPosition; $('.text-item').each(function () { index = $(this).index(); txtPosition = $(this).offset().top; imgPosition = $('.image-item').offset().top + 50; if (txtPosition < imgPosition) { $('.image-item img').attr('src', $(this).attr('data-image')); } }); });
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