Jquery 在浏览器窗口中可见时如何添加类

我想在滚动到视图中时将类

.animated

添加到元素中

到目前为止，我有以下代码：

function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.circle-purple-lighter');

    // If the animation has already been started
    if ($elem.hasClass('animated')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('animated');
    }
}

函数IsElementViewPort（元素）{
变量$elem=$（elem）；
//获取页面的滚动位置。
var scrollem=（（navigator.userAgent.toLowerCase（）.indexOf（'webkit'）！=-1）？'body'：'html'）；
var viewportTop=$（scrolllem.scrollTop（）；
var viewportBottom=viewportTop+$（window）.height（）；
//获取元素在页面上的位置。
var elemTop=Math.round（$elem.offset（）.top）；
var elemBottom=elemTop+$elem.height（）；
返回（（elemTopviewportTop））；
}
//检查是否是开始动画的时间。
函数checkAnimation（）{
变量$elem=$（'.circle purple lighter'）；
//如果动画已经启动
if（$elem.hasClass（'animated'））返回；
如果（IsElementViewPort（$elem））{
//启动动画
$elem.addClass（“动画”）；
}
}

---

然而，这只适用于Chrome。有没有关于如何修复（或其他方法）跨浏览器的想法？IE9+

这可能会有所帮助：

jQuery可视插件：

下面是如何使用这个插件的演示（我在Chrome和Firefox中测试过）：

---

谢谢，我将如何在代码中实现这一点？支持文档不是很清楚。我更新了一个如何使用插件的示例，并验证了它在Firefox和Chrome中的工作情况

$(function () {
    var $h1 = $('h1');
    var testVis = function () {
        $h1.each(function () {
            if ($(this).visible()) {
                $(this).addClass('animated');
            } else {
                $(this).removeClass('animated');
            }
        });
    };
    $(window).on('scroll resize', testVis);
    testVis();
});