Приветствую, всех. Сделать индикатор прокрутки с 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>
<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 является индикатором прокрутки, которая перемещается слева направо.
Готовый код установите в гаджет в любом месте макета блога (лучше в самом низу).
Ещё по теме - как изменить внешний вид полосы прокрутки
Надеюсь кому - то и пригодится.
оформите подписку на новые шпаргалки
Как всегда, очень любопытно! У меня уже целая коллекция рекомендаций. Когда-нибудь ее продадут на аукционе за крутые доллары!
ОтветитьУдалитькак Вы себе это представляете.
УдалитьЗабрал себе, спасибо)))
ОтветитьУдалитьДа, я уже посмотреть успела. Чёрное и белое, хорошо смотрится!!!
УдалитьМне очень понравилось! Спасибо, Вика!!!! Попробую.
ОтветитьУдалитьНе стоит благодарить. Рада, что понравилось.
УдалитьСпасибо за очень полезную фишку. Как ты уже заметила, я стала применять твои советы - очень украшают блог, реально )))
ОтветитьУдалитьДа, Вика, конечно заметила. Что не говори, но дизайн имеет большое значение. Шаг за шагом и с кодами нормально научишься работать. И уже считай не чайник.
ОтветитьУдалить