ZorNet.Ru — сайт для вебмастера » HTML и CSS » Цветная полоса прокрутки для сайта на CSS

Цветная полоса прокрутки для сайта на CSS

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

Можно оставить по ширине, как идет по умолчанию, так как в такой диаграмме, можно написать в начале несколько знаков, это может быть название сайта или что сами решите видеть. Но и сделать тонкую полосу, но здесь уже знаки будут отсутствовать. Если решите их убрать, то в стилях CSS находим ZORNER.RU и убираем или заменяем на свое, все очень просто и удобно в установке.

Не сомневаюсь что можно выставить на отдельную страницу, но думаю если выставлять, то чтоб отображалась панель на всем сайте.

Так по умолчанию выстроено:

Приступаем к установке:

HTML:

Код

Добавим js код:

Код

$(window).on('scroll',function() {
sS = $(window).scrollTop();
fF = $(document).height()-$(window).height();
dD=sS/fF*100;
Scroll=Math.round(dD);
$('div#bumisan_goles span').css({width: ''+Scroll+'%'});
});

CSS:

Код

#bumisan_goles {
  position: fixed;
  background: #f7f1f1;
  top: 0px;
  color: #fdfdfd;
  width: 100%;
  font-family: sans-serif;
  padding: 18px 0px;
}
div#bumisan_goles span {
  width: 0%;
  background: #215ead;
  position: absolute;
  padding: 0px 0px;
  top: 0px;
  left: 0px;
  font-size: 17px;
}
div#bumisan_goles span:after {
  color: #fbf1f1;
  mix-blend-mode: difference;
  content: "ZORNET.RU";
  display: block;
  padding: 11px 7px;
  margin: 0px;
  width: 100px;
  font-family: sans-serif;
  font-size: 13px;
}

Демонстрация

Источник: www.mybeststudio.ru

19 Апреля 2018 Просмотров: 1463 Комментариев: (0)

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

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

Kosten

Комментарии: 0