This is my first post. I am new to code and am trying to code my case studies for my portfolio. I want to include a "scroll bar" to work as a sort of timeline on the left side that is "fixed" so as you scroll down the page it fills up. This website has a something close to what I am looking to accomplish. they have a small red "scroll bar" on the left side.
A simple way is to divide your scroll position by the height of the body object.
The height of the body object can be obtained with var numerator = document.body.scrollTop.
Your scroll position is slightly more tricky. You will want the height of the element minus the might of the view port. This can be done with
var denominator = document.documentElement.scrollHeight - document.documentElement.clientHeight
from there you you set up an event listener that sets the height of your scrollbar element as a percentage of the viewheight when scrolling.
document.addEventListener('scroll', function(e) {
document.getElementById('scrollBar').style.height = numerator/denominator + '%'
});
There might be better ways to do this, but this is the first one to come to my mind.
I modified alleynraven answer, and put it into codepen.
var $scrollEl = document.querySelector('.scroll-progress')
document.addEventListener('scroll', function(e) {
var currentPos = document.documentElement.scrollTop;
var scrollPos = document.documentElement.scrollHeight - document.documentElement.clientHeight;
$scrollEl.style.height = (currentPos / scrollPos * 100) + '%';
});.scroll-progress {
position: fixed;
left: 0;
top: 0;
width: 8px;
background-color: rgb(248 113 113);
}
.bg-blue {
background-color: rgb(186 230 253);
}
.bg-teal {
background-color: rgb(153 246 228);
}
.bg-lime {
background-color: rgb(217 249 157);
}
.bg-yellow {
background-color: rgb(254 240 138);
}<div class="scroll-progress"></div>
<div class="content">
<div class="bg-blue" style="height: 1000px;"></div>
<div class="bg-teal" style="height: 1000px;"></div>
<div class="bg-lime" style="height: 1000px;"></div>
<div class="bg-yellow" style="height: 1000px;"></div>
</div>