Красивый индикатор прокрутки (Progress Bar)

Красивый индикатор прокрутки (Progress Bar)
Полоса прокрутки или же индикатор прокрутки это полезная вещь на любом сайте, так как она выглядит стильно и позволяет пользователю понять в какой части сайта он сейчас находится. К примеру, на нашем сайте тоже есть такая полоса и вы можете её заметить в самом верху страницы. Она увеличивается вместе с прокруткой самой страницы.



Как можно сделать индикатор прокрутки (Progress Bar)?

Для реализации подобного нам придется использовать скрипт, написанный на jQuery, поэтому первым делом необходимо подключить сам jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
После этого напишем сам скрипт, который будет создавать наш Progress Bar:

$(window).scroll (function () {
  var ratio = $(document).scrollTop () / (($(document).height () - $(window).height ()) / 100);
  $("#progress").width (ratio + "%");
});
Сам индикатор будет отображаться в div'е с идентификатором progress. Итак, создадим следующий HTML код:

<div id="cont">
  <div id="progress"></div>
</div>
Осталось только добавить стили ко всему этому. Минимальный набор стилей:

* {
  margin: 0;
  padding: 0;
}

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

#progress {
  background: #ED5E42;
  width: 0%;
  height: 2px;
}
Если хотите проверить работу на пустой странице, то добавьте этот стиль, чтобы у вас была прокрутка: html { height: 2500px }.

Дополнительный стиль

Чтобы все выглядело еще лучше вы можете использовать градиент вместо простой заливки одним цветом весь блок. Для этого вы можете воспользоваться генератором градиентов.

Индикатор полностью готов! Вам нужно немного подправить стили, чтобы он вписывался в общий дизайн вашего сайта, но это уже мелочи :)
()
Количество показов: 473
26 мая 2017

Возврат к списку

Корзина0 позиций на сумму 0 руб.