当内容在可见视口中时启动jQuery动画

Question

当内容位于视口的可见区域时，我想计算一个数字。目前，我有一个动画，但是它是从页面加载开始的。因此，当用户到达内容（页面底部）时，看不到它。

这是我的JS代码来计算数字：

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

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

  {

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

  });  

});

来自此示例：https://codepen.io/hi-im-si/pen/uhxFn

当数字达到页面的可见区域时，有什么方法可以启动动画吗？