Number count according to jQuery page scroll!

Question

I have a PROGRESS BAR that displays numbers from 0% up to 100%, I need that when the scroll is greater than 900px, start the counting of the numbers for example from 0% to 70% in the time of 2 seconds.. I have a code here that is working however.. it does count only that if I move the scroll of the page again it redoes the count.. I need the animation to be done only once after the user exceeds the 900px of scroll.. follows the code:

if(scrollTop > 900) {
  $('#front-bar').animate({ width: "70%" }, 2000);
  // Percent count
  $({ counter: 0 }).animate({ counter: 70 }, {
    duration: 2000,
    step : function(){
      $('#front-bar-count').text(Math.ceil(this.counter) + ' %');
    }
  });
}

Answer 1

You can use an auxiliary variable to control if you have already done the animation and test the variable before animating.

Example:

var animacaoFeita = false;

$(window).scroll(function(){ //função de interpretação de evento de scrolling
  ...
  if(scrollTop > 900 && animacaoFeita == false) {
    animacaoFeita = true; //colocar como já feita para não fazer da próxima vez
    $('#front-bar').animate({ width: "70%" }, 2000);
    // Percent count
    $({ counter: 0 }).animate({ counter: 70 }, {
      duration: 2000,
      step : function(){
        $('#front-bar-count').text(Math.ceil(this.counter) + ' %');
      }
    });
  }
  ..
}