scrollClass是一个jQuery插件，它将用户指定的CSS类添加到html元素中，并在滚动到视图中时执行回调，具有可配置的延迟、阈值和顶部偏移选项。非常适合滚动触发的元素动画或图像延迟加载。

如何使用它:

1.在html文档的末尾加载最新的jQuery库和jQuery scrollClass插件。

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="scrollClass.js"></script>

2.使用数据滚动类以指定在元素滚动到视图中时应用于该元素的CSS类。在这种情况下，我们将使用Animate.css来创建向下滚动时的“摆动”动画效果。

<div class="animated" data-scroll-class="swing">
  ...
</div>

3.调用函数并完成。

$('.animated').scrollClass();

4.使用jQuery scrollClass插件的自定义回调函数延迟加载图像。

$('.image').scrollClass({
  callback: function () { //lazy load images
    var selector = $(this);
      var img = $("<img />").attr('src', $(this).data("img")).one('load', function() {
      selector.append(img);
    });
  }
});

5.默认插件选项。

$('.el').scrollClass({

  // set CSS class after 10 milliseconds delay
  delay: 20,

  // set CSS class when 50% of element enters the viewport
  threshold: 50,

  // number of pixels to offset elements from the top of the window
  offsetTop: 0,

  // reset the element after it leaves the viewport
  reset: false,

  // the frequency at which the script runs while scrolling the page
  throttle: 50,
  
});

更新日志：

2022-02-04

• 添加了数据滚动属性、添加了油门、添加了重置

2018-05-21

• 重构了延迟选项，添加了用于加载的侦听器，更新了版本

预览截图

jQuery插件在滚动时将CSS类添加到元素 scrollClass