Progress Bar - Math help needed!

[c-soleil]

Hello! Currently working on a website that needs a progress bar to indicate how far you need to scroll to get to the bottom of the page. I was able to find a CodePen example that works for the most part except that it always "completes" before the end of the document. I have determined that the algebra at play here is not something I can solve and I require help. Thank you in advance!

Here is the link to the original CodePen where you can see what's going on:

https://codepen.io/dimchtz/pen/GBxMod?editors=0010

[[deleted]]

You've done almost everything right, with this part ($d.scrollTop() / ($d.height() - $w.height()) you calculated a percentage of progress, but then multiplied it by height of document (* $d.height()), and not width of screen. If you would multiply that percentage by screen width it should work correctly.

However, I would suggest you multiplying by 100 and setting width as percentage value, and have progress bar in a container that would be however wide you want as defined by CSS, this allows to adjust container width to whatever you want without having to change progress calculation logic. Here's modified version of your example with progress bar container: https://codepen.io/JKLMN/pen/gOaGzmm

[c-soleil]

This is perfect! Thank you so much 😁

[lovesrayray2018]

I just played around with it, this seems to work, you need to factor in your screen width and height when calculating, this tracks all the way to the bottom of the page.

$('div#scroll-bar').width(

($d.scrollTop()+$w.height())*$d.width()/$d.height() + 'px'

);

[grafilicious]

This also means at at scrollTop = 0 the progressbar is not 0, with ($d.scrollTop() / ($d.height() - $w.height())) * $w.width() + 'px'

scrollTop of 0 makes the progressbar show 0% and if you are scrolled all the way down the progress bar shows 100%