仅在滚动到视图中的第一个tme上添​​加类

Question

当我第一次滚动查看时，我想向div添加一个类。我正在使用this FIDDLE中的代码在滚动时添加类-但每次div滚动到视图中时，它都会这样做，而不仅仅是第一次。

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 () {
    $('.class').each(function () {
        if (isScrolledIntoView(this) === true) {
            $(this).addClass('in-view')
        }
    });

});

Answer 1

您可以使用辅助类来表示是否不应再次处理元素。

$(window).scroll(function() {
  //only check classes that do not have our class flag
  $('.class:not(.previously-in-view)').each(function() {
    if (isScrolledIntoView(this) === true) {
      //add the in-view class and the class flag to exclude it from future logic
      $(this).addClass('in-view').addClass('previously-in-view');
    }
  });
});