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
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.
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
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')); } }); });