How To Increment A Number By 1 On Window Scroll

October 02, 2024 Post a Comment

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 ha

Solution 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;
}

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

Solution 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.

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

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

Solution 3:

To increase the number on scroll down, you can do

var lastScrollPosition = $(document).scrollTop();
varnumber = 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()) + '%');
})

Solution 4:

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:

functionregisterScrollEvent() {
 // get reference to DOM elements once since the scroll event fires frequentlyvarnumber = 0,
  elNav = $("#progress-tracker-nav li"),
  elProgress = $(".progress-line");
 $(window).scroll(function(){
  // Only start the process when the first section comes into viewif(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?

Solution 5:

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;
}

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

JavaScript Creator