CODEWITHSUNDEEP
javascriptjqueryhtmlscrollprogress-bar
Vedant Terkar
Vedant Terkar

Reputation: 4682

Implementing Scrolling progress bar for more than one element

I'm trying to implement the scrolling progress bar. (The bar that'll tell the user about How much of an article within an div (s)he has read).

Something like implemented on this site.

I've Designed my custom bar and coded it on fiddle. It works fine you can see it.

Here is code:

HTML:

<br /><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 /><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 irrelevant so not posting it.

Now what I want is:

Any advice, idea, thoughts are greatly appreciated!

Thanks in advance :).

Upvotes: 0

Views: 1536

Answers (1)

Marc Lainez
Marc Lainez

Reputation: 3080

There are already some plugins doing what you want. Check out toc-scrolling-progress.

But if you want it on the whole page you could do something like this:

$(window).scroll(function() {

  var documentHeight = $(document).height();
  var windowHeight   = $(window).height();
  var distanceToTop  = $(window).scrollTop();

  var percentScrolled = distanceToTop/(documentHeight - windowHeight) * 100;
  $('#progress-bar').css({'width': percentScrolled + '%'});
});

I created a jsfiddle with a demo

Upvotes: 1

Related Questions