Индикатор прокрутки страницы jQuery
Ставим в body разметку
<div class="scroll-line"></div>
Не много css для линии.
.scroll-line{ position: fixed; z-index: 999; height: 2px; background: red; width: 0; top: 0; transition: all 0.3s; }
В transition регулируем скорость анимации, background и height соответственно цвет и высота. z-index нужен что бы не перекрывалось другими элементами сайта, если у вас перекрывается, можно поднять значение.
scroll() window.addEventListener('scroll', function(e) { scroll() }); function scroll(){ var scroll = 100 * $(window).scrollTop() / ($(document).height() - $(window).height()); $('.scroll-line').css('width', scroll + '%') }
Создаем функцию scroll что бы не дублировать код, вставляем в событие прокрутки страницы и при загрузке, это нужно что бы индикатор заполнился до того как наступит событие прокрутки, например при обновлении страницы.
В самом скрипте простая математика.
Если есть вопросы, задавайте в комментариях или через форму обратной связи.
0 комментариев