仅为视图中的元素添加类

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的页面，我想对它们进行动画处理，但是如果我为每个DIV设置“ .class”，则此代码将同时为所有它们添加“视图中”。 当我看到第一个div时，这会触发所有动画开始播放，这不是我想要的。

任何人都有更好的主意可以帮助我吗？

Answer 1

尝试这个：

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

---

循环浏览所有元素，并在isScrolledIntoView(this)函数中传递当前上下文，因此this是您当前的elem ，可在视图中使用。

小提琴

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')
    }

});