Jquery function is working just on first element, I want to work on all classes

Question

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 !

Answer 1

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.