Все больше на разных тематических ресурсах можно заметить индикатор, который отвечает за прокрутку на странице. Это стало модно показывать текущее положение положение, где находится страница и отображается прокрутка.
Также его называют прогресс бар для горизонтального CSS-скролла. В сети интернет можно найти много похожего по функционалу материала, который выполнен для прокрутки на чистом CSS, что немного отличается. Но этот на JavaScript, который отвечает за работу индикатора, где все корректно показывает, то для этого можно изначально посмотреть, как выглядит по работе.
Приступаем к установке:
HTML
Код
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="ndowto-sefect">
<h2>ZorNet - портал для вебмастера</h2>
<div class="crontadi-catorigosan">
<div class="detupol-kgacitun" id="kidemuga"></div>
</div>
</div>
<div class="dsazug-olasneg">
<h3>Красивый индикатор прокрутки</h3>
<p>Здесь ваше описание на странице, где может распологатся картинки или другие элементы оформление.</p>
</div>
</body>
</html>
CSS
Код
.ndowto-sefect {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #f1f1f1;
}
.ndowto-sefect h2 {
text-align: center;
}
.crontadi-catorigosan {
width: 100%;
height: 8px;
background: #ccc;
}
.detupol-kgacitun {
height: 8px;
background: #4caf50;
width: 0%;
}
.dsazug-olasneg {
padding: 100px 0;
margin: 50px auto 0 auto;
width: 80%;
}
JS
Код
window.onscroll = function() {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("kidemuga").style.width = scrolled + "%";
}
На этом установка закончена, можно заметить, что индикатор идет в светло зеленом оттенке, все изменяется в CSS, который закреплен за этим материалом.
Демонстрация
