How To Create a Scroll Indicator
<div class="header">
<div class="scroll-wrapper">
<div id="scrollIndicator"></div>
</div>
</div>
<div class="content-area">
Place multiple content here, either paragraphs or any thing else.
</div>
/* Place header at the top and always fit to the size of device */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 60px;
background: #555;
z-index: 9999;
}
/* Indicator Wrapper */
.scroll-wrapper {
position: absolute;
bottom: 0;
width: 100%;
height: 4px;
background: #fff;
}
/* Progress Indicator - Initial Width to 0%; */
#scrollIndicator {
width: 0%;
height: 4px;
background: #cc4551;
}
// When user scrolls, width of the Scroll Indicator Increase on scroll down and decrease on Scroll Up
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("scrollIndicator").style.width = scrolled + "%";
}