.addClass在最初加载元素

Question

情况： 我写了检测<section>是否已经进入滚动通过视功能，如果是这样.addClass('fadeInUp')其他.removeClass('fadeInUp')导致.animation-element淡入视口。

问题：由于条件被绑定到的滚动功能，最初加载的第一<section>不.addClass('fadeInUp')直到用户滚动过去然后滚动回<section>。 View JS Fiddle for example

问题：如何我还发现，如果在最初加载<section>中视，然后.addClass('fadeInUp')，等...

当前JS功能：

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() { 
    $('.animation-element').each(function() { 
     if (isScrolledIntoView(this) === true) { 
      $(this).addClass('fadeInUp') 
     } else { 
      $(this).removeClass('fadeInUp') 
     } 
    }); 
}); 

这是原型的JS Fiddle。

Answer 1

只需调用在页面加载的事件处理程序外的事件处理程序内部调用的相同代码。

$(function() { 

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

    function checkElements(selector) { 
     $(selector).each(function() { 
      if (isScrolledIntoView(this) === true) { 
       $(this).addClass('fadeInUp') 
      } else { 
       $(this).removeClass('fadeInUp') 
      } 
     }); 
    } 

    $(window).scroll(function() { 
     checkElements('.animation-element'); // <-- check on scroll 
    }); 

    checkElements('.animation-element'); // <-- check on page load 
} 

Answer 2

我不确定你在问什么。这是你想要的？

var updateScroll = function() { 
    $('.animation-element').each(function() { 
    ... 
    } 
} 
$(window).scroll(updateScroll); 
updateScroll();