Додаємо Progress Bar читання

HTML, CSS, JavaScript, PHP
Progress Bar

Progress Bar (прогрес бар) – це полоса у верхній частині сайту, яка умовно відображає скільки було прочитано чи переглянуто контенту на конкретній сторінці web-сайту при скролінгу сторінки.

Як додати Progress Bar на сайт?

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

По-перше, треба змінити ваш текстовий редактор TinyMCE (який стоїть за замовчуванням) на CodeMirror. Далі створюємо новий модуль, а саме вид модулю «Custom».

У новостворений модуль потрібно вставити такий код:

<div class="progress-container">
<div id="myBar" class="progress-bar">&nbsp;</div>
</div>
<style>
.progress-container {
position: fixed;
top: 0px;
z-index: 2000;
width: 100%;
background-color: #f5f5f5 !important;
width: 100%;
height: 4px;
background: #ccc;
}

.progress-bar {
height: 4px;
background: #57b4fc;
width: 0%;
margin-bottom: 4px;
}
</style>
<script type="text/javascript">

// When the user scrolls the page, execute progressiveScroll function
window.onscroll = progressiveScroll;

function progressiveScroll() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

Далі вимикаємо відображення Title модулю, вмикаємо модуль, обираємо позицію чим вище, тим краще. Як правило, це позиція «Top» (назва позиції може відрізнятися в залежності від шаблону). Також обираємо де саме (на яких сторінках, пунктах меню) буде відображений наш Progress Bar.

Також ви можете переглянути відео, де все показано покроково:

Теги: