• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать красивый индикатор прокрутки на JS (Индикатор положения прокрутки страницы на стилистике CSS)
Сделать красивый индикатор прокрутки на JS
Kosten
Дата: Пятница, 2019-02-08, 05:15 | Сообщение 1
Администраторы
Сообщений:22271
Награды: 56


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

Также его называют прогресс бар для горизонтального 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, который закреплен за этим материалом.

Демонстрация
Прикрепления: 3130303.png(51.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Сделать красивый индикатор прокрутки на JS (Индикатор положения прокрутки страницы на стилистике CSS)
  • Страница 1 из 1
  • 1
Поиск: