Counter-Skript ausführen, wenn Element auf Webseite gescrollt wird

Question

Ich bin komplett neu in Javascript. Ich versuche, ein Zählskript auszuführen, aber ich möchte nur, dass es startet, wenn Sie zum Element auf dem Bildschirm blättern (damit Sie die Zählung sehen können). Derzeit funktioniert mein Code derzeit nur beim Laden von Seiten. Kann mir bitte jemand helfen? Vielen Dank. Hier

ist das HTML-Code-Element: <span class="count">100</span>

hier ist das Skript, das zur Zeit beim Laden der Seite funktioniert:

$('.count').each(function() { 
$(this).prop('Counter',0).animate({ 
    Counter: $(this).text() 
}, { 
    duration: 4000, 
    easing: 'swing', 
    step: function (now) { 
     $(this).text(Math.ceil(now)); 
    } 
}); 

});

Answer 1

Man könnte so etwas wie folgt verwenden:

$element = $('.count'); 
$(window).scroll(function() { 
    var hT = $element.offset().top, 
     hH = $element.outerHeight(), 
     wH = $(window).height(), 
     wS = $(this).scrollTop(); 
    if (wS > (hT + hH - wH)) { 
     $element.each(function() { 
     $(this).prop('Counter',0).animate({ 
      Counter: $(this).text() 
      }, { 
       duration: 4000, 
       easing: 'swing', 
       step: function (now) { 
        $(this).text(Math.ceil(now)); 
       } 
      }); 
     }); 
    } 
}); 

Was sie tut, ist die aktuelle Scroll gegen die in der Seiten-Offsetelement versetzt validieren. Ich hoffe es hilft.

Answer 2

Ok, ich habe gerade eine Lösung gefunden, die jemand anderes gemacht hat. Ich bin mir sicher, dass ein einfacheres Skript möglich ist, aber dieses funktioniert wie ein Zauber. Ich habe das SPAN Element etwa so: <span class="timer count-title count-number" data-to="100" data-speed="5000"></span>

habe ich dann die Februar aktualisiert 2 JavaScript-Code @Bootstrap counter start on display gefunden. Ich hoffe, dies hilft anderen, die nach einem Scroll-to-Activated Counter suchen.