JQUERY.COUNTO.JS：在滚动计数数字上不是OnLoad

我正在使用一个页面网站，我想用它添加一个计数数字，所以我使用javascript.countTo.js 。 我创建了每个部分来对相关数据进行分组，并将部分计数器

放在我的投资组合部分

。 每次页面加载数字计数，当我滚动时，我总是看到数字停止或结束它正在计数。 现在，当我滚动并进入部分计数器

时，我想要数字计数。 另外，我在我的网站上使用了WOW.js和easingJS ，如果你把代码与它结合起来是最好的，但如果没有，它也是可以接受的。 代码如下：

的index.html

                                       
 
SCROLL DOWN
 
First, Scroll Now
 
Second, try Again but wait for few seconds before scroll to identify.
 
 
 
 
 
 
 
 
 
 
 
  89 Finished projects 
 
 
 
  2343409 Templates 
 
 
 
  1302 Cup of coffees 
 
 
 
  52 Happy clients 
 
 
 
 
    /* USE JUST TO ADJUST HEIGHT*/ .justaddheight{ height: 500px; } .text-center{ text-align: center; }   $('.counter-number').countTo();  

Answer 1

要检查元素是否滚动到视图中，我将使用此答案中的函数。

现在，我们可以使用下面的函数检查元素#counters是否在视图中

 function isScrolledIntoView(el) { var elemTop = el.getBoundingClientRect().top; var elemBottom = el.getBoundingClientRect().bottom; var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight); return isVisible; } 

这首先使用getBoundingClientRect()获取边界点。 这将返回调用方法的元素的top ， left ， bottom ， right ， width和height 。 这些可用于检测元素是否在视图内。 从该对象中取出top和bottom ，并检查元素底部是否小于窗口高度。

---

首先，在window上绑定scroll事件。 在处理程序内部，检查元素是否在视图中。 当元素进入视图时，然后调用元素上的插件并取消绑定scroll事件。

 function isScrolledIntoView(el) { var elemTop = el.getBoundingClientRect().top; var elemBottom = el.getBoundingClientRect().bottom; var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight); return isVisible; } $(window).on('scroll', function() { if (isScrolledIntoView(document.getElementById('counters'))) { $('.ace-counter-number').countTo(); // Unbind scroll event $(window).off('scroll'); } }); 

 .justaddheight { height: 500px; } .text-center { text-align: center; } 

   
 
SCROLL DOWN
 
First, Scroll Now
 
Second, try Again but wait for few seconds before scroll to identify.
 
 
 
 
 
 
 
 
 
 
 
  89 Finished projects 
 
 
 
  2343409 Templates 
 
 
 
  1302 Cup of coffees 
 
 
 
  52 Happy clients 
 
 
 
  

Answer 2

您可以使用shows.js插件，该插件在元素出现，消失并在视口中重新出现时为元素提供事件触发器。

 50 

和JS

 appear({ init: function init() {}, elements: function elements() { // Track all elements with the class "count" return document.getElementsByClassName('count'); }, appear: function appear(el) { $(el).countTo({ from: 0, to: $(el).html(), speed: 1300, refreshInterval: 60 }); }, disappear: function disappear(el) {}, bounds: 200, reappear: true });