ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Горизонтальная полоса прокрутки с цифрами

Горизонтальная полоса прокрутки с цифрами

Горизонтальная полоса прокрутки с цифрами
В данной статье представлен материал, это как создать горизонтальную прокрутку с индикатором выполнения, где присутствует меняющий циферблат. Сама прокрутка смотрится оригинально, где находится в самом верху, что не будет мешать чтению или изучению материала, или файлов. Но и безусловно сами цифры, где они идут в большом количестве, а не просто проценты, здесь до мили процентов указано. Где сами будете изначально видеть, из какого материала страница состоит, это в виде его накопление.

Для сайтов при установочном процессе горизонтальная прокрутка всегда включена, так как мы изначально закрепляем его на весь сайт или на данную страницу. Прямо сейчас индикатор выполнения стоит на месте, так как не производиться поворачиваем ости страницы, как только выше или ниже опустите, где сразу меняется цветовая полоса и циферблат по численности.

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

Так выглядит при проверке по рабочим моментам:

Прокрутить на сайте в виде слайд бара

Установка:

В HEAD

Код
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

HTML

Код
<div id="aspesek-avunsuka">
  <div id="advoku-kaduc"></div>
</div>
<p id="protsent">0%</p>
<div class = "kutulka"></div>
<div class = "kutulka"></div>
<div class = "kutulka"></div>
<div class = "kutulka"></div>
<div class = "kutulka"></div>
<div class = "kutulka"></div>
<div class = "kutulka"></div>
<div class = "kutulka"></div>
<div class = "kutulka"></div>
<div class = "kutulka"></div>
<div class = "kutulka"></div>

CSS

Код
#aspesek-avunsuka{
  width:100%;
  height: 3px;
  background: #625f5f;
  position: fixed;
}
#advoku-kaduc{
  width: 0%;
  height: 3px;
  background: #1174eb;
}
.kutulka{
  height: 1000px;
  width: 100%;
}
#protsent{
  color: #f5f1df;
  position: fixed;
}

JS

Код
$(document).ready(function(){
  $(window).scroll(function(){
  var top = $(window).scrollTop();
  var height = $(document).height();
  height = height - $(window).height();
  var progress = top/height;
  progress = progress * 100;
  progress = progress + "%";
  $("#advoku-kaduc").width(progress);
  progress = progress.substring(0, progress.length - 2);
  progress = Math.round(progress * 9007199254740991) / 9007199254740991;
  progress = progress + "%";
  if(top / height === 1){
  progress = "100%";
  }
  $("#protsent").html(progress);
  });
});

Что насчет гаммы цвета, то она полностью прописана в закрепленной стилистике CSS, где выставляете ту гамму цвета, которая соответствует основному дизайн сайта.

Демонстрация
2022-07-03 Загрузок: 2 Просмотров: 394 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 3
Gerat
Gerat 2022-07-03 20:331
0
Как понимаю, что аналогичным способом, можно этот скрол и ниже сделать.
-SAM-
-SAM- 2022-07-08 05:302
+1
Можно, только это не полоса прокрутки, а прогресс-бар её.
Чтобы сделать по низу, то там где position:fixed нужно указывать где именно фиксировать: по умолчанию идёт вверху, но если сделать bottom:0 - прижмёт к низу страницы.
FeStemBer
FeStemBer 2022-07-27 21:573
0
-SAM-, есть совершенно не похожие по дизайну прокрутки, но они больше подойдут на страницы, которые по формату большие, а не такие как данный сайт.

Не с того профа, Яндекс браузет тесты провожу, по сути он шустрее хрома.
avatar