要素がウィンドウ内にあるときにjQueryカウンタをトリガする方法はありますか？

Question

このjQueryコードは0から1750までのカウンタをトリガしますが、このカウンタはページの一番下にあります。スクロールしないと、カウンタのアニメーションが表示されません。ウィンドウ内の要素にヒットした後にのみこれを実行する方法はありますか？

// 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

あなたのウィンドウのトップポジションを確認してください。ターゲット要素の高さまたはそれ以上で、ウィンドウの高さが低い場合は、カウントアニメーションを実行してください。

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