Индикатор прокрутки страницы

Довольно просто скрипт добавляющий некий интерактив на страницы сайта — индикатор прокрутки страницы.

Для начала — пример работы:

Установка предельно простая:

1. Разметка html — вставляем внизу страницы — перед тегом < /body >

<progress value="0">
   <div class="progress-container">
    <span class="progress-bar"></span>
  </div>
</progress>

2. Добавим стили CSS

progress{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:5px;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border:none;
  background:transparent;
  color:#F00;
}
 
progress::-webkit-progress-bar{
  background:transparent;
  border-radius:5px;
}
 
progress::-webkit-progress-value{
  background:#F00;
  border-radius:5px;
}
progress::-moz-progress-bar{
  background:#F00;
  border-radius:5px;
}
.progress-container{
  width:100%;
  background:transparent;
  position:fixed;
  top:0;
  left:0;
  height:5px;
  display:block;
}
 
.progress-bar{
  background:#F00;
  width:0%;
  display:block;
  height:inherit;
}

3. Последнее, что нам осталось сделать — Js + jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
   $(function() {
       $(window).on("scroll resize", function() {
           var o = $(window).scrollTop() / ($(document).height() - $(window).height());
           $(".progress-bar").css({
               "width": (100 * o | 0) + "%"
           });
           $('progress')[0].value = o;
       })
   });
</script>

 Исходники + демо:

Скачать: Page_scroll_indicator

Скачано: 147, размер: 1.7 KB, дата: 22 Фев. 2019