.addClass auf anfänglich geladene Element

Question

Situation: ich eine Funktion geschrieben haben, der erkennt, ob <section> das Ansichtsfenster über Scroll eingegeben hat, wenn ja .addClass('fadeInUp') sonst .removeClass('fadeInUp') die .animation-element verursacht auf der Ansichtsfenster verblassen in.

Problem: Da die bedingte auf die Scroll-Funktion binded ist, die erste <section>, die anfänglich geladen wird nicht .addClass('fadeInUp'), bis der Benutzer scrollt dann zurück zum <section> scrollt. View JS Fiddle for example

Frage: Wie kann ich erkennen, auch wenn die anfänglich geladen <section> im Ansichtsfenster, dann .addClass('fadeInUp'), etc ...

Aktuelle JS-Funktion:

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

Hier ist die JS Fiddle des Prototyps.

Answer 1

Rufen Sie einfach den gleichen Code auf, den Sie im Event-Handler außerhalb des Event-Handlers beim Laden der Seite aufrufen.

$(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

Ich bin mir nicht sicher, was Sie fragen. Suchst du danach?

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