仅为视图中的元素添加类

Question

我一直在寻找像这个页面的影响(我正在寻找使用页面滚动启动动画的触发器)

有些人使用以下代码在StackOverFlow中帮助我:

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function(){

    if (isScrolledIntoView('.class') === true) {
        $('.class').addClass('in-view')
    }
});

结果可以在这里找到:http://jsfiddle.net/z3xTU/

但现在我又遇到了另一个问题.我有一个包含多个DIV的页面,我想为它们设置动画,但如果我用".class"设置每一个,这段代码同时为它们添加"视图内".当第一个div来查看时,这会触发所有动画启动,这不是我正在寻找的.

谁有更好的想法可以帮助我？

Answer 1

试试这个:

$(window).scroll(function () {
   $('.class').each(function () {
      if (isScrolledIntoView(this) === true) {
          $(this).addClass('in-view')
      }
   });
});

循环遍历所有元素并传递函数中的当前上下文isScrolledIntoView(this),因此这this是您当前可用的elem.

小提琴