fixed side scrollbar for case study-CodePudding

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.

https://edesigninteractive.com/

CodePudding user response：

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.

CodePudding user response：

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 ></div>

<div >
  <div  style="height: 1000px;"></div>
  <div  style="height: 1000px;"></div>
  <div  style="height: 1000px;"></div>
  <div  style="height: 1000px;"></div>
</div>