Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

Как сделать индикатор прокрутки под дизайн блога

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

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


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

Не требуется подключения библиотеки Jquery. Используем небольшой javascript и код HTML.  Посмотрите наглядно на тестовом блоге - прокрутите страницу вниз и вверх. В самом верху странице сам индикатор будет показывать на каком расстоянии страницы вы находитесь.


<div class="progress-container">
    <div class="progress-bar" id="progressbar"></div>
  </div>

<script>
//<![CDATA[
window.addEventListener("scroll", 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("progressbar").style.width = scrolled + "%";
}
//]]>
</script>

<style>
.progress-container {
  width: 100%;
  height: 3px;
  background: #00796B;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999
}

.progress-bar {
  height: 3px;
  background: #76FF03;
  width: 0%
}</style>


Отрегулируйте фон, который отмечен, чтобы соответствовать теме вашего блога на ваш вкус.

.progress-container находится там, где расположен индикатор прокрутки, и .progress-bar  является индикатором прокрутки, которая перемещается слева направо.
Готовый код установите в гаджет в любом месте макета блога (лучше в самом низу).
Ещё по теме - как изменить внешний вид полосы прокрутки

Надеюсь кому - то и пригодится. 

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

8 комментариев:

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

    ОтветитьУдалить
  2. Забрал себе, спасибо)))

    ОтветитьУдалить
    Ответы
    1. Да, я уже посмотреть успела. Чёрное и белое, хорошо смотрится!!!

      Удалить
  3. Мне очень понравилось! Спасибо, Вика!!!! Попробую.

    ОтветитьУдалить
    Ответы
    1. Не стоит благодарить. Рада, что понравилось.

      Удалить
  4. Спасибо за очень полезную фишку. Как ты уже заметила, я стала применять твои советы - очень украшают блог, реально )))

    ОтветитьУдалить
  5. Да, Вика, конечно заметила. Что не говори, но дизайн имеет большое значение. Шаг за шагом и с кодами нормально научишься работать. И уже считай не чайник.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML