оригинальный индикатор прокрутки

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

Вот такой оригинальный скроллинг страницы.

Это сам код. Расписывать в подробностях не буду. Разберём ниже, как его оформить под персональный дизайн.

<div id="scroll-percentage">
    <div class="percentage"></div>
</div>
<div id="percentage-value"></div>
<script type="text/javascript">const updateScrollPercentage = function() {
    const heightOfWindow = window.innerHeight,
    contentScrolled = window.pageYOffset,
    bodyHeight = document.body.offsetHeight,
    percentage = document.querySelector(".percentage"),
    percentageVal = document.querySelector("#percentage-value")
    if(bodyHeight - contentScrolled <= heightOfWindow) {
        percentageVal.textContent = percentage.style.width = "100%"
    }
    else {
        const total = bodyHeight - heightOfWindow,
        got = contentScrolled,
        percent = parseInt((got/total) * 100)
        percentageVal.textContent = percentage.style.width = percent + "%"
    }
}
window.addEventListener('scroll', updateScrollPercentage)</script>

<style>#scroll-percentage {
    position: fixed;
    bottom: 0;
    left: 0x;
    width: 100vw;
    color: #000;
    margin: 0;
    padding: 0;
    z-index: 1000;
}
#scroll-percentage .percentage {
    display: inline-block;
    background-color: #004D40; /* цвет нижней полосы */
    border-bottom: 5px solid #F4FF81;  /*цвет рамки полосы */
    height: 4px;  /* ширина полосы */
    width: 0;
    box-sizing: content-box; 
}
#percentage-value {
    box-sizing: content-box;
    position: fixed;
    bottom: 20px;
    left: 20px;
    height: 80px;  /*размер круга можно уменьшить/увеличить */
    width: 80px; /*размер круга можно уменьшить/увеличить */
    color: #FFFFFF; /*цвет цифр  */
    background-color: #004D40; /*фон круга */
    text-align: center;
    line-height: 80px; /*регулировать при изменении размера круга */
    border-radius: 50%;
    border: 5px solid #F4FF81; /*цет рамки круга */
    font-size: 24px; /*размер шрифта цифр */
    font-weight: bold;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); /*размер и цвет тени круга */
} </style>

Настройте под ваш дизайн цветовую гамму индикатора прокрутки. Сам код можно установить, на отдельную страницу, в самом конце сообщения, перейдя в формат HTML, так и в гаджет HTML/JavaScript, тоже лучше в конце макета блога.

Вот и всё. Всем добра и до встречи.

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

Введите Ваш email