Jquery 当一个DIV进入视图时，添加类

我想在一个元素中添加一个类，比如DIV，但也可以在img、h1等元素中添加。当用户滚动时，它进入视口

如何计算我的元素是否在视口中

在pseudo中：如果#swing已进入视口，则添加类“动画反弹”（使用CSS3播放动画）。动画完成后，删除类“动画反弹”

我只是不知道从哪里开始，除了我知道添加我想要的类的代码：

$('#star').addClass('animated bounceOutLeft');

进度编辑

感谢@Bibhas，我正在尝试实现它，我想我已经做到了，因为开发工具说类名在那里，但是这些类名是css3转换，他们只是不玩，有什么问题吗

$(function() {
  setInterval(function() {
    $("#star")                             // get all <h2>s
      .filter(":onScreen")              // get only <h2>s on screen
      .addClass('animated bounceOutLeft');
  }, 1000)                              // repeat every second
})

$（函数（）{
setInterval（函数（）{
$（“#星”）//获取所有的s
.filter（“：onScreen”）//在屏幕上仅获取s
.addClass（“动画反弹”）；
}，1000）//每秒重复一次
})

显然有人为此编写了一个jQuery插件。根据他的密码-

function isOnScreena(elem) {
    var $window = $(window)
    var viewport_top = $window.scrollTop()
    var viewport_height = $window.height()
    var viewport_bottom = viewport_top + viewport_height
    var $elem = $(elem)
    var top = $elem.offset().top
    var height = $elem.height()
    var bottom = top + height

    return (top >= viewport_top && top < viewport_bottom) ||
           (bottom > viewport_top && bottom <= viewport_bottom) ||
           (height > viewport_height && top <= viewport_top && bottom >= viewport_bottom)
}

功能isOnScreena（elem）{
变量$window=$（窗口）
var viewport_top=$window.scrollTop（）
var viewport_height=$window.height（）
var viewport\u bottom=viewport\u top+viewport\u height
变量$elem=$（elem）
var top=$elem.offset（）.top
变量高度=$elem.height（）
var底部=顶部+高度
返回（顶部>=视口顶部和顶部<视口底部）||
（底部>视口\顶部和底部视口\高度和顶部=视口\底部）
}

源代码不到20行。你可以阅读和学习

此处的

功能可能会有所帮助：

$（窗口）.on（'load resize scroll'，函数（e）{
$（'h2'）。每个（函数（索引）{
var h2Height=parseInt（$（this）[0].getBoundingClientRect（）.height）；
var viewHeight=Math.max（document.documentElement.clientHeight，window.innerHeight | | 0）；
//当标题穿过视口底部时，该值将立即返回true
如果（$（此）[0].getBoundingClientRect（）.top<（视图高度-H2高度））{
$（'h2'）.eq（index）.addClass（'added-class'）；
}
});
});

编辑：注意，这假设浏览器在标准模式下运行

---

Edit2:根据来自的建议，我在

on（）

中添加了一些其他事件处理程序，这也将解释滚动以外的操作。

这更适合作为注释而不是答案。因为OP要求的是编码解决方案，而不是插件。询问和回答编码问题也是如此。看看OP问的问题，“我怎么…？”我想你没有检查链接。那里的22行代码清楚地回答了OP的“How do I…？”，如果我复制@benpickles编写的代码并粘贴到这里，您会喜欢吗？这算是答案吗？是的。读我的答案。我指着他写的代码，就像他写的一样。如果这不是回答和表扬，我不知道这是什么。杰伊·布兰查德在这里是个书呆子。他不该告诉别人这是怎么回事。有一件事与此无关，那就是惩罚那些试图帮助别人的人。这不是建立社区的方法。@请检查此处的用法-。您需要将其放入

setInterval

@Bibhas中，谢谢。我已经根据DevTools添加了类名，但我的动画似乎无法播放。你知道为什么会这样吗？代码/问题已更新。@egr103您的代码缺少setInterval函数中的interval参数。再次检查这个例子。我用我问题中的代码尝试了一下（刚刚更新），但仍然不起作用……有什么想法吗？

$(window).on('load resize scroll',function(e){
    $('h2').each(function(index) {
        var h2Height = parseInt($(this)[0].getBoundingClientRect().height);
        var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
        // This will return true as soon as the heading crosses the bottom of the viewport
        if ($(this)[0].getBoundingClientRect().top < (viewHeight - h2Height)) {
            $('h2').eq(index).addClass('added-class');
        }
    });
});