Loading...

Прогресс бар при прокрутке страницы

Сегодня я расскажу вам, как быстро и надежно сделать скроллбар для сайта на javascript и css, при этом затратив всего пару минут.

 Статьи   Время чтения: 2 минуты   Просмотров: 191

Прогресс бар при прокрутке страницы

Приветствую, друзья, на страницах Blanet.Ru, сегодня будем делать прогресс бар при прокрутке страницы. Это интересная фишка для ваших сайтов. Он будет визуально показывать пользователю сколько осталось скролить страницу. Так что он имеет не только дизайнерское применение, но и практическое. Делать мы это будем не используя каких либо плагинов или jQuery. Наш прогресс бар будет использовать только ванильный JavaScript и немного CSS.

Как всегда, вы можете взять весь код прямо из этой статьи. Давайте начнем!

Делаем прогресс бар при скролле

Тут все достаточно просто, закрепим его вверху страницы при скролле. Так же вы можете поместить его в хедер вашего сайта, если вы используете фиксированный хедер.

Для начала разместим его в html. Так как для примера я закреплю его в верхней части сайта, то я пишу этот код сразу после открывающего тега

<div class="progress-bar" id="progressBar"></div>

Далее добавим немного CSS для стилизации.

Важно! Если вы хотите поместить прогресс бар в нижнюю часть фиксированного хедера, вам нужно будет указать bottom: 0; transform: translateY(-50%). Для того, что бы просто зафиксировать его в верхней части страницы используйте код ниже:

.progress-bar {
    position: fixed;
    left: 0;
    top: 0;
    height: 4px; // Высота линии, можно менять/подбирать
    width: 0%;
    background: red; // Цвет линии, можете заменить на HEX.
}

Далее приступим к написанию JavaScript кода. Код достаточно простой, так что я просто оставлю комментарии в нем.

function progressBar() {
    // Узнаем на сколько страница прокручена
    let scroll = document.body.scrollTop || 
document.documentElement.scrollTop;
    // Узнаем высоту всей страницы
    let height = document.documentElement.scrollHeight - 
document.documentElement.clientHeight;
    // Получаем в % на сколько прокручена страница
    let scrolled = scroll / height * 100;

    // Подставляем % прокрутки в ширину нашей линии
    document.getElementById('progressBar').style.width = 
scrolled + '%';
}

// Запускаем функцию, когда пользователя скролит
window.addEventListener('scroll', progressBar);

Пример прогресс бара при скролле

progressbar

Если вы следовали инструкциям, у вас должен получиться вот такой эффект при проктурке:

Спасибо, что прочитали! Если у вас остались вопросы — смело задавайте их в комментарии, постараюсь помочь всем)



Автор: Google

Последние страницы

Copyright © 2022 Blanet.Ru. Все права защищены.

Контент, размещенный на данном сайте полностью пренадлежит Прокофьеву Олегу. Перепечатка без согласия автора разрешена только в случае размещения прямой ссылки на источник (https://blanet.ru). В любом ином случае контент должен быть изменен не менее, чем на 75%.

По вопросам размещения рекламы обращайтесь по адресу: info/dog/blanet.ru