Страницы

Поиск по вопросам

вторник, 27 ноября 2018 г.

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

Прогресс скроллинга прикручен, но нужно чтобы он начинался не с самого начала скролла, а спустя 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; } });


Ответ

Для того чтобы получить необходимый результат нужно немного изменить формулу, а именно ввести в нее сдвиг на необходимое количество 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; } });

Комментариев нет:

Отправить комментарий