GitHub:https://github.com/dirkgroenen/jQuery-viewport-checker
版本:Release 1.8.8
本地下载:jQuery-viewport-checker-master

插件说明:

这是一个通过监测页面中的元素在浏览器中的位置,适时添加、删除类的一种插件。
比如,可以设置元素滚动到窗口指定位置的时候对该元素添加样式,使其淡入,或者做某个动作。
 

插件的用法:
<head>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="jquery.viewportchecker.min.js"></script>

    <script>
        $(document).ready(function(){
            $('.dummy').viewportChecker();
        });
    </script>
</head>
全局设置:
$('.dummy').viewportChecker({
    classToAdd: 'visible', // 元素可见时需要加的Class,
    classToAddForFullView: 'full-visible', // 元素完全可见时需要加的Class
    classToRemove: 'invisible', // 'classToAdd'类被添加之前要添加的Class
    removeClassAfterAnimation: false, // 动画结束后是否要删除被添加的Class
    offset: [100 OR 10%], // 相对于基准位置的偏移量
    invertBottomOffset: true, // 是否以底部为基准位置
    repeat: false, // Add the possibility to remove the class if the elements are not visible
    callbackFunction: function(elem, action){}, // 回调函数
    scrollHorizontal: false // 是否水平滚动
});
单独设置:

除了全局设置以外呢,你也可以使用data-方式,给每个元素单独设置属性。这些属性会覆盖全局设置。