И снова прогресс скроллинга страницы

#javascript #html #css

Прогресс скроллинга прикручен, но нужно чтобы он начинался не с самого начала скролла,
а спустя 900 пикселов. Код как ниже работает, но он спустя 900 px показывает прогресс
уже проскролленой страницы, а нужно чтобы начиналось как будто с ноля. Надеюсь понятно
изложил. Большое спасибо Елене :)

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

    

Ответы

Ответ 1

Для того чтобы получить необходимый результат нужно немного изменить формулу, а именно
ввести в нее сдвиг на необходимое количество px. В результате получим такую формулу:

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