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

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

Автор: delux · Опубликовано 22.02.2019 · Обновлено 08.04.2019

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

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

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

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

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

</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;
}

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>