多个元素的滚动jquery addclass

多个元素的滚动jquery addclass,jquery,sass,animate.css,Jquery,Sass,Animate.css,当你向下滚动时,我试图使元素淡入。我希望他们在我向下滚动到div开始的位置时出现,我得到了第二条横幅,但是第三条横幅的内容不会消失。另外,即使第二条横幅代码有效,也应该有更好的方法来实现这一点,可能是可重用的。我只是想不通。任何帮助都将不胜感激 $(window).on('scroll', function() { if($(this).scrollTop() > 100) { $('.second-banner-content').addClass('animated

当你向下滚动时,我试图使元素淡入。我希望他们在我向下滚动到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');
    }
  });

您可以使用类似的插件,或者您可以计算高度并尝试类似的方法

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

我为我的项目找到了合适的插件。谢谢你的主意!