javascript – And again the progress of scrolling the page

Question:

The progress of scrolling is screwed on, but it needs to start not from the very beginning of the scroll, but after 900 pixels. The code as below works, but after 900 px it shows the progress of the already scrolled page, but it needs to start as if from scratch. I hope I explained it clearly. Many thanks to Elena 🙂

var bar = $('#bar'),
    $window = $(window),
    docHeight = $(document).height(),
    winHeight = $window.height(),
    baseX = docHeight - winHeight;

$(window).scroll(function(){
   if($(window).scrollTop() > 900) {
       $window.scroll(function(e) { 
           var x = ($window.scrollTop() / baseX ) * 100;
           bar.css({'width': + x + '%'});
       });
   } else {
       return;
   }
});

Answer:

In order to get the desired result, you need to slightly change the formula, namely, enter a shift into it by the required number of px. As a result, we get the following formula:

x = (scroll - shift) / (height - shift) ) * 100

jsFiddle

var bar = $('#bar'),    
    $window = $(window),
    docHeight = $(document).height(),
    winHeight = $window.height(),
    baseX = docHeight - winHeight,
    shift = 900;

$(window).scroll(function(){       
   if($(window).scrollTop() > shift) {         
       $window.scroll(function(e) { 
           var x = (($window.scrollTop() - shift) / (baseX - shift) ) * 100;
           bar.css({'width': + x + '%'});
       });
   } else {
       return;
   }
});