当元素在窗口时如何触发jQuery计数器？

Question

我有一个从0到1750之间触发计数器的jQuery代码。但是，这个计数器在我的页面底部，如果你没有足够快地滚动到它，你就错过了计数器动画。是否有一种方法只在您命中窗口中的元素时才触发此操作？

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

尝试这样的方法，检查您的窗口顶部位置，如果您的目标元素较高或相等，而窗口高度较低，则执行计数动画。

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