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>

Answer 2

The problem is that you define number inside the scroll event. You will need to define it outside in order for the amount to be incremented.

var number = 0;
$(window).scroll(function(){
  number++;
});

The current way you are doing it means number is reset to 0 each time the event fires.

Answer 3

I think the height of the progress bar should be relative to the scrollTop of the window divided by the maximum scroll possible (the height of the document minus the height of the window). Using this formula:

percentage_of_height_of_progress_bar = 100 * scroll_top_of_window / (height_of_document - height_of_window);

Example:

$(window).scroll(function() {
  var percent = $(document).scrollTop() / ($(document).height() - $(window).height()) * 100;
  $(".progress").css('width', percent + '%');
})

body {
  height: 1000px;
}

.progress {
  position: fixed;
  width: 0%;
  height: 10px;
  background: red;
}

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

Answer 4

To increase the number on scroll down, you can do

var lastScrollPosition = $(document).scrollTop();
var number = 0;
$(window).on('scroll', function(e) {
    if($(document).scrollTop() > lastScrollPosition ){
        number++;
    }
})

Likewise, you can replace the > to < if you need to reduce the number when user scroll up.

If you want to reduce the height on scroll up and increase the height on scroll down, you can do this as well.

var lastScrollPosition = $(document).scrollTop();
var initalHeight = 100;
$(window).on('scroll', function(e) {
    $(".progress-line").css('height', ((100/ (100 - $(document).scrollTop()/$(document).height()) + '%');
})

Answer 5

These events will fire VERY frequently, so you might want to move your selectors into a closure so they don't have to be recalculated each time:

function registerScrollEvent() {
 // get reference to DOM elements once since the scroll event fires frequently
 var number = 0,
  elNav = $("#progress-tracker-nav li"),
  elProgress = $(".progress-line");
 $(window).scroll(function(){
  // Only start the process when the first section comes into view
  if(elNav.hasClass('active-section')) {
   number++;
   elProgress.css('height', number + '%');
  }
 })
}

Also, be aware of issues on IOS related to scroll events only firing after the scrolling completes:

https://github.com/twbs/bootstrap/issues/16202

Also, not sure how you are planning on resetting. The scroll events will fire whether scrolling up or down so the number is just going to keep increasing. Is that what you want?