.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();