Geek Answers Handbook

Changing the value of a scroll-based progress bar

So, I would like my progress to increase, based on how far I have scrolled and how much is left.

I tried this: jsFiddle and it doesn't seem to work, I based my script with someone else's script that made the block move horizontally based on% scroll.

my code is:

HTML

<progress id="progressbar" value="0" max="100"></progress> <br /> <br /> <br /> Lorem<br /> Ipsum<br /> Dolor<br /> . . . .

Js

 $(document).ready(function () { $(window).scroll(function () { var s = $(this).scrollTop(), d = $(document).height(), scrollPercent = (s / d); var position = (scrollPercent); $("#progressbar").progressbar('value', position); }); }); });

I don’t think I am doing it right (I tried to imitate another person and couldn’t)

+7
javascript jquery html css progress-bar
source share
4 answers

Work DEMO

try it

 $(window).scroll(function () { var s = $(window).scrollTop(), d = $(document).height(), c = $(window).height(); scrollPercent = (s / (dc)) * 100; var position = scrollPercent; $("#progressbar").attr('value', position); });

Hope this helps, thanks

+17
source share

The logic is this:

 totalValue = (documentHeight - windowHeight); currntValue = scrolledValue; percentage = (currntValue/ totalValue ) * 100

http://jsfiddle.net/PvVdq/71/

  $(document).ready(function () { $(window).scroll(function () { var s = $(this).scrollTop(), d = $(document).height()-$(window).height(), scrollPercent = (s / d)*100; $("#progressbar").attr('value', scrollPercent); }); });
+5
source share

I would suggest making the maximum value of the dynamic progress bar in accordance with the page size.

Change the HTML for your progress bar.

 <progress id="progressbar" value="0"></progress>

Here's what your jQuery looks like.

 $(document).ready(function () { $(window).scroll(function () { var s = $(document).scrollTop(), d = $(document).height() - $(window).height(); $("#progressbar").attr('max', d); $("#progressbar").attr('value', s); }); });

This eliminates the need for hacker computing, and also makes the dynamic display of progress dynamic for longer or shorter pages.

Working demo

0
source share

To get the current scroll factor, you must first check to see if your document has a scrollable level. In this special case, I decided to return 0 . The following calculation is the same as above.

 /** * @returns number */ function scrollYProgression() { const scrollableHeight = window.document.body.scrollHeight - window.innerHeight; if (scrollableHeight <= 0) return 0; return window.scrollY / scrollableHeight; }

Associated with jQuery :

 $(window).scroll(() => { $('#progressbar') .attr('value', scrollYProgression() * 100); });

Beware when listening to scroll events! It can be really hard, and you really need it no more than once per repainting. You can check window.requestAnimationFrame to prevent your method from mass calling (maximum 60 / s).

Regarding scroll event listeners: http://www.html5rocks.com/en/tutorials/speed/animations

0
source share

More articles:


All Articles