Question

当用户滚动时，我想在一个元素中添加一个类，比如DIV，还会在img，h1等上添加一个类。

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

In伪：如果#swing已进入视口添加类'animated bounceOutLeft'（使用CSS3播放动画）。动画完成后，删除类'动画bounceOutLeft'。

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

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

进度编辑

感谢@Bibhas我正在尝试实现这个OnScreen plugin，我认为我已经完成了，因为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

Answer 2

getBoundingClientRect()功能可能会有所帮助。 Here's a CodePen I did：

$(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');
        }
    });
});

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

Edit2：根据@brandnewjames的建议，我已将其他一些事件处理程序添加到on()中，这也将解释仅滚动之外的操作

当DIV进入视图添加类时

2 个答案: