Красивый индикатор прокрутки: CSS + jQuery

Прогресс-бары бывают разных типов, например, шкалы загрузки. Эта инструкция описывает создание интересного индикатора прокрутки — полосы, заполняющейся по мере прокрутки страницы. Это эффектный и универсальный элемент для любых сайтов.

Разметка и подключение файлов

Создайте файлы index.html и style.css. В index.html добавьте стандартную HTML-разметку, включая подключение стилей (style.css) и jQuery (необходим для работы скрипта). После открывающего тега <body> добавьте два div:

div с id="container" — контейнер для прогресс-бара.
div с id="progress" — сам прогресс-бар.

JavaScript код

Скрипт, срабатывающий при прокрутке страницы (window.onscroll), вычисляет процент прокрутки и устанавливает ширину прогресс-бара:

window.onscroll = function() {
  let ratio = document.documentElement.scrollTop / (document.documentElement.scrollHeight - window.innerHeight);
  ratio = ratio * 100;
  document.getElementById("progress").style.width = ratio + "%";
};

CSS стили

Добавьте следующие стили в style.css:

* {
  margin: 0;
  padding: 0;
}

html {
  height: 2500px; /* высота для прокрутки */
}

#container {
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  height: 2px;
  z-index: 99999;
}

#progress {
  background-color: #4CAF50; /* или используйте градиент */
  width: 0%;
  height: 2px;
}

Эти стили устанавливают ширину контейнера на 100%, позиционируют его сверху и снизу страницы, задают высоту, цвет и начальную ширину прогресс-бара. z-index обеспечивает отображение индикатора поверх других элементов.

Градиент

Для улучшения внешнего вида используйте градиент. Замените background-color в CSS на код градиента, например:

#progress {
  background-image: linear-gradient(to right, #007bff, #28a745);
  width: 0%;
  height: 2px;
}

Этот код создает функциональный и стильный индикатор прокрутки, улучшая пользовательский опыт за счет повышения интерактивности сайта.