Как сделать индикатор прокрутки под дизайн блога

Приветствую, всех. Сделать индикатор прокрутки с Javascript - это один из способов украсить внешний вид вашего блога, чтобы он казался более живым и привлекательным.

Это тонкая цветная полоса, которая будет отображаться при прокрутке страницы вниз. Как альтернатива ползунка скроллинга на странице. Такой  своеобразный индикатор прокрутки в процентном отношении, когда прокручиваем вниз индикатор смещается вправо. И наоборот - при прокрутке вверх смещается  влево.

Не требуется подключения библиотеки Jquery. Используем небольшой javascript и код HTML.  Посмотрите наглядно на тестовом блоге - прокрутите страницу вниз и вверх. В самом верху странице сам индикатор будет показывать на каком расстоянии страницы вы находитесь.

Демонстрация 

<div class="progress-container">
    <div class="progress-bar" id="progressbar"></div>
  </div>

<script>
//<![CDATA[
window.addEventListener("scroll", myFunction);

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("progressbar").style.width = scrolled + "%";
}
//]]>
</script>

<style>
.progress-container {
  width: 100%;
  height: 3px;
  background: #00796B;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999
}

.progress-bar {
  height: 3px;
  background: #76FF03;
  width: 0%
}</style>

Отрегулируйте фон, который отмечен, чтобы соответствовать теме вашего блога на ваш вкус.

.progress-container находится там, где расположен индикатор прокрутки, и .progress-bar  является индикатором прокрутки, которая перемещается слева направо.
Готовый код установите в гаджет в любом месте макета блога (лучше в самом низу).

Ещё по теме - как изменить внешний вид полосы прокрутки

Надеюсь кому - то и пригодится. 

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :