当DIV进入视图添加类时

Question

当用户滚动时,我想在一个元素中添加一个类,比如DIV,还可以在img,h1等上添加一个类.

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

在伪:如果#swing已进入视口添加类'animated bounceOutLeft'(使用CSS3播放动画).动画完成后,删除类'动画bounceOutLeft'.

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

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

进展编辑

感谢@Bibhas我正在尝试实现这个OnScreen 插件,我认为我已经完成了因为Dev工具说类名是,但这些类名是css3过渡,它们只是没有播放,可能是什么问题？

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

Answer 1

显然有人为此写了一个小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)
}

源代码几乎不是20行.你可以阅读和学习.- https://github.com/benpickles/onScreen