2

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

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

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

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

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

进度编辑

感谢@Bibhas，我正在尝试实现这个 OnScreen插件，我想我已经完成了，因为开发工具说类名在那里，但这些类名是 css3 转换，它们只是没有播放，可能是什么问题？

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

2 回答 2

7

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

于 2013-02-20T18:03:16.820 回答
0

该getBoundingClientRect()功能可能在这里有所帮助。这是我做的 CodePen：

$(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()，这也将解释除了滚动之外的操作。

于 2016-07-13T16:42:00.413 回答