Animation starten, wenn Element sichtbar ist

Question

Kann ich die Fortschrittsbalken trotzdem starten, wenn sie auf dem Bildschirm sichtbar sind? Denn jetzt starten sie, sobald die Seite geladen ist, obwohl sie weiter unten auf der Seite sind. Kannst du sie starten lassen, wenn du sie erreichst?

jsfiddle.net/33ne8j1d/

Answer 1

Sie können ein Scroll-Ereignis binden wie folgt:

$(document).bind('scroll', function(ev) { 
    var scrollOffset = $(document).scrollTop(); 
    var containerOffset = $('#pbar').offset().top - window.innerHeight; 
    if (scrollOffset > containerOffset) { 
     var animate = setInterval(function() { 
     loading(); 
     }, time); 
     // unbind event 
     $(document).unbind('scroll'); 
    } 
});  

});

jsfiddle

Answer 2

Sie benötigen einen Ereignis-Listener auf die Rolle zu binden, wo Sie dann überprüfen, ob der scrollTop der Seite größer als die offsetTop des Laders ist, falls es Ihnen dann kann die Animation starten. Ich werde ein Beispiel posten kurz