如何仅在屏幕上显示包含 DIV 时启动此 JQuery 计数器

Question

在Wordpress页面上，我有这段代码来开始计数，但我只希望它开始计数，当用户向下滚动到页面足够远，以便它出现在屏幕上(它在一个包含的DIV中称为"三计数器部分"(。

您如何改造此代码以启用它？

$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{ duration: 11000,
easing:'easeInOutCubic',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});  
});

Answer 1

您可以简单地执行以下操作以在任何元素可见时触发事件。

setInterval(function(){
  if($('.div1').is(':visible')){
    //do something
  }
  else {
    //do nothing..
  }      
}, 100);

** 根据需要更改 .div1。