I've created a Jquery function that looks like this
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");
}
}});
The problem is, it is working just on the first class when I'm scrolling down, I want to work on each class.I also try something like:
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");
}
}
});});
But with same results.Any ideas or suggestion about how to apply to all elements that have .slide-up class when I'm scrolling down ?
Thanks in advance !
Consider the following.
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");
}
});
});
This should perform an action on each element. All code has been switched to jQuery.