How To Increment A Number By 1 On Window Scroll

Question

I have a type of progress tracker sitting fixed on the side of my page and as you scroll, I want the line to gain height (in percentages) as the user scrolls down the page. I am having trouble getting the height to increase by just one as the user scrolls. Here is my current code.

JS

$(window).scroll(function(){
 var number = 0; /* I'd like to increment this by one on scroll */
 // Only start the process when the first section comes into view
 if($("#progress-tracker-nav li").hasClass('active-section')) {
  number++; /* I'd like to increment this by one on scroll */
  $(".progress-line").css('height', number + '%');
 }
})

Answer 1

You have to declare number variable outside of the scroll event handler, because every time when scroll event is fired, the variable value is refreshed.

In your current code, you assign every time 0 value for number variable.

var number = 0;
$(window).scroll(function(){ 
  number++;
  $("#number").text(number + '%');
})

body{
  height:1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="number"></div>