Wie wird der jQuery-Zähler ausgelöst, wenn sich das Element im Fenster befindet?

Question

Ich habe diesen jQuery-Code, der einen Zähler von 0 bis 1750 auslöst. Aber dieser Zähler befindet sich am Ende meiner Seite, und wenn Sie nicht schnell genug scrollen, verpassen Sie die Counter-Animation. Gibt es eine Möglichkeit, dies auszulösen, nur wenn Sie das Element im Fenster gedrückt haben?

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

Answer 1

so etwas wie dies versuchen, überprüfen Sie die Position Fenster oben und wenn höher oder gleich des Zielelements und weniger die Fensterhöhe, dann tun Sie Ihre Zählung Animation.

HTML

<div class="wrapper-count"> 
    <ul> 
    <li class="count">0</li> 
    <li class="count">0</li> 
    <li class="count">0</li> 
    </ul> 
</div> 

JS

$(document).ready(function(){ 
    $(function(){ 
    $(window).on("scroll", function(){ 
     var win_height = $(this).height(); 
     var win_pos = $(this).scrollTop(); 
     var top_pos = $(".wrapper-count").position().top; 

     if(win_pos >= top_pos - win_height){ 
     // here goes your count logic 
     } 
    }); 
    }); 
});