I am currently working on implementing a scrolling progress bar to show users how much of an article within a div they have read.
For reference, something similar can be seen on this site.
I have created my custom progress bar and coded it on fiddle, where you can see it in action.
Here is the code:
HTML:
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="xyz">
Hello !!<br />
XYZ<br />
Hello !!<br />
XYZ<br />
Hello !!<br />
XYZ<br />
Hello !!<br />
XYZ<br />
Hello !!<br />
XYZ<br />
Hello !!<br />
XYZ<br />
Hello !!<br />
XYZ<br />
Hello !!<br />
XYZ<br />
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="xyzprog"><div id="prog">Intro</div></div>
JQuery/JS:
$(function(){
$(window).scroll(function(){
var elemTop=$("#xyz").offset().top,elemHeight=$("#xyz").height();
var total=elemTop+elemHeight;
var scTop=$(window).scrollTop();
var prog=((scTop-elemTop)/elemHeight)*100;
var html="Intro;Read=";
if(prog>100){ prog=100; html="Intro;Read=" }
if(prog<0){ prog=0; }
$("#prog").animate({
"width":""+prog+"%"
},1).html(html+""+prog+"%");
});
});
CSS is not included as it is irrelevant for this example.
My next step is to:
Figure out a way to make this code work for more than one element (at least 10).
Create a plugin similar to
$(elem).scrollProgress(). Any guidance on how to start would be appreciated.Explore if there are better alternatives to achieve the same functionality.
Any suggestions, ideas, or thoughts on this matter are welcomed!
Thank you in advance :).