当页面到达某个位置时如何启动计数器？答案

【问题标题】：How to start the counter when the page reach a certain position?当页面到达某个位置时如何启动计数器？
【发布时间】：2015-12-13 06:47:19
【问题描述】：

我正在制作一个计数器，这样当页面滚动到某个位置时，计数器就会启动并动画到 HTML 中已经设置的数字。

我是一个编程新手，想知道如何为计数器设置动画。另外，如何获取页面滚动的位置。同样在我的代码中，我不知道我的逻辑是否正确，但我的setInterval 根本不起作用。我该如何处理？

http://jsfiddle.net/a1t5m48f/2/

function Counter() {
  this.element = document.getElementsByClassName('counter-number');

  var intervalId;

  var that = this;

  this.init = function() {
    for (var i = 0; i < that.element.length; i++) {
      intervalId = setInterval(that.animate(i), 1000);
    }

  }

  this.animate = function(i) {
    var j = 0;
    that.element[i].innerHTML = j;
    j++;
    if (j == parseInt(that.element[i].innerHTML)) {
      clearInterval(intervalID);
    }
    console.log('hello');
  }

}

var counter = new Counter();
counter.init();

【问题讨论】：

标签： javascript html css counter setinterval

【解决方案1】：

使用一个setTimeout() 定时器比使用几个setInterval() 定时器更可取。在存储在内部属性中的.init() 方法计数器目标值中，当前值设置为零。存储在.indices 数组中的活动计数器索引。当在.animate() 中达到目标值时，计数器元素索引将从该数组中删除。如果数组中有一些活动的计数器，我们设置一个新的计时器在延迟后调用下一次迭代。动画在空的 .indices 数组上停止。

var counter;
var pos = 200;

function Counter() {
  this.element = document.getElementsByClassName('counter-number');
  this.currentValues = [];
  this.targetValues = [];
  this.indices = [];
  var that = this;

  this.init = function() {
    var value;
    for (var i = 0; i < that.element.length; i++) {
      that.indices.push(i);
      that.targetValues.push(parseInt(that.element[i].innerHTML));
      that.currentValues.push(0);
      that.element[i].innerHTML = '0';
    }
    setTimeout(that.animate, 1000);
  }

  this.animate = function() {
    var value;
    var index;
    var indicesToRemove = [];
    for (var i = 0; i < that.indices.length; i++) {
      index = that.indices[i];
      if (that.currentValues[index] < that.targetValues[index]) {
        that.currentValues[index]++
        that.element[index].innerHTML = that.currentValues[index].toString();
      } else {
        indicesToRemove.push(i);
      }
    }

    while (indicesToRemove.length > 0) {
      i = indicesToRemove.pop();
      that.indices.splice(i, 1);
    }

    if (that.indices.length > 0) {
      setTimeout(that.animate, 1000);
    }
  }
}

window.onscroll = function() {
  if ('undefined' === typeof counter
    && (document.body.scrollTop > pos || document.documentElement.scrollTop > pos)
  ) {
    counter = new Counter();
    counter.init();
  }
}

【讨论】：

【解决方案2】：

function whatsMyPosition(){
    scrollPosition = {
        y: window.pageYOffset
    }
    scrollPosition.y === something ? do Something;
}

【讨论】：