He creado una función Jquery que se ve así
jQuery(document).ready(function ($) { var animations = document.querySelectorAll('.slide-up'); for (var i = 0; i < animations.length; i++) { var windowHeight = window.innerHeight; var elementTop = animations[i].getBoundingClientRect().top; var elementVisible = 140; if (elementTop < windowHeight - elementVisible) { animations[i].classList.add("active"); } else { animations[i].classList.remove("active"); } }});El problema es que funciona solo en la primera clase cuando me desplazo hacia abajo, quiero trabajar en cada clase. También intento algo como:
jQuery(document).ready( function($){ $('slide-up').each(function($) { var animations = document.querySelectorAll('.slide-up'); for (var i = 0; i < animations.length; i++) { var windowHeight = window.innerHeight; var elementTop = animations[i].getBoundingClientRect().top; var elementVisible = 140; if (elementTop < windowHeight - elementVisible) { animations[i].classList.add("active"); } else { animations[i].classList.remove("active"); } } });});Pero con los mismos resultados. ¿Alguna idea o sugerencia sobre cómo aplicar a todos los elementos que tienen la clase .slide-up cuando me desplazo hacia abajo?
Gracias por adelantado !
Considera lo siguiente.
jQuery(function($) { var animations = $('.slide-up'); var windowHeight = window.innerHeight; var elementVisible = 140; animations.each(function(i, el) { var elementTop = $(el).position().top; if (elementTop < windowHeight - elementVisible) { $(el).toggleClass("active"); } }); });Esto debería realizar una acción en cada elemento. Todo el código se ha cambiado a jQuery.