滚动多个元素的jquery addclass答案

【问题标题】：jquery addclass on scroll for multiple elements滚动多个元素的jquery addclass
【发布时间】：2019-02-04 20:55:38
【问题描述】：

我试图让元素在您向下滚动时淡入。当我向下滚动到 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

【问题讨论】：

标签： jquery sass animate.css

【解决方案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

【讨论】：

我为我的项目找到了合适的插件。谢谢你的想法！