修改CountUp jQuery以从滚动点开始

Question

我在我的网站上使用以下代码。我将该部分放置在页面的下方，因此无法立即看到它。现在正在发生的事情是，当网站的访问者滚动到该部分时，数字已经开始计数，我希望它在该部分出现时进行动画处理。仅当访问者滚动时，该部分才能在浏览器窗口中可见时如何激活该片段？

$('.counter').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');

  $({
    countNum: $this.text()
  }).animate({
      countNum: countTo
    },

    {

      duration: 2000,
      easing: 'linear',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
        //alert('finished');
      }

    });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="counter" data-count="150">0</div>
<div class="counter" data-count="85">0</div>
<div class="counter" data-count="2200">0</div>

https://codepen.io/hi-im-si/pen/uhxFn