Website scroll progressbar might not be the accurate terminology to describe this thing but hopefully can clarify the context I am referring to. It is basically a progressbar which progresses as you scroll below and regress as you scroll upwards. I’ve seen this implemented through a 3rd party plugins and libraries in countless websites.
Instead of using a whole different third party library for a simple task as this, I decided to create my own to implement in this blog and I must say, it looks fairly similar to any other 3rd party plugins out there. My short brainstorming to solve and achieve this progressbar felt very clear and concise but ran into some difficulty with calculations which I will explain later.
We need two things to achieve or implement this scroll progress in our website.
Things we need
divcontainer on top of our page.
- A hook to manage our document’s
Let’s start out by creating an empty
div container in our page, preferably right below the
Now, let’s give it a bit of a style,
box-shadow and a preferred
background-color should keep it simple and attractive. Considering my blog consists of dark
foreground colors, I chose to go with
#000000 (Hex Black).
Now that we are done creating a styled progressbar for our website, we should add functionality on it by hooking into our document’s
scroll event. Considering I used jQuery, I decided to add my code in jQuery as well.
.. and that should give us a nice progressbar for our website which sets the progress to our currently scrolled percentage.
The difficulty for me was to figure out the actual document’s height. For one of my equation during the development phase gave me maximum of 94% instead of 100% for fully scrolled.
Check out the Codepen Demo.
Enjoy & Happy Coding.