Question

我正在寻找类似this page的影响（我正在寻找通过页面滚动启动动画的触发器）

有些人使用此代码在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是您的当前元素，可供查看。

Fiddle

Answer 2

为不同的元素使用不同的类或使用id。

$(window).scroll(function(){

    if (isScrolledIntoView('.class1') === true) {
        $('.class1').addClass('in-view')
    }
    if (isScrolledIntoView('.class2') === true) {
        $('.class2').addClass('in-view')
    }

});

或

$(window).scroll(function(){

    if (isScrolledIntoView('#id1') === true) {
        $('#id1').addClass('in-view')
    }
    if (isScrolledIntoView('#id2') === true) {
        $('#id2').addClass('in-view')
    }

});

仅为视图中的元素添加类

2 个答案:

Fiddle