jquery addclass на прокрутку для нескольких элементов

Question

Я пытаюсь заставить элементы исчезать при прокрутке вниз. Я хочу, чтобы они отображались, когда я прокручиваю вниз до того места, где начинается div, у меня работает второй баннер, но содержимое третьего баннера не исчезает. Плюс, хотя второй код баннера сработал, должен быть лучший способ сделать это, возможно, что-то многоразовое. Я просто не могу понять это. Любая помощь будет оценена.

$(window).on('scroll', function() {
    if($(this).scrollTop() > 100) {
      $('.second-banner-content').addClass('animated fadeInUp slow');
      $('.second-banner-img').addClass('animated fadeInUp slow');
    }
  });

  $(window).on('scroll', function() {
    if($(this).scrollTop() > 300) {
      $('.third-banner-content').addClass('animated fadeIn slow');
    }
  });

https://codepen.io/yubind/pen/BOQjdB

Answer 1

Для этого вы можете использовать плагин, например AOS , или вы можете рассчитать высоту и попробовать что-то вроде этого

var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
     $(this).addClass('animated fadeInUp slow');
}

https://codepen.io/iamaditya7/pen/aaBBpP