javascript - 当元素在窗口中时如何触发 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
      }
    });
  });
});