1

I'm trying to build progress menu bar(similar to one on the piccsy investors http://www.piccsy.com/investors/ )

It measures the height of the page and progresses %.

Any ideas on how to do it?

Thanks, Nikola.

2 Answers 2

10

Here you have a solution for this issue.

First of all the div:

<div id="bar"></div>​

Now some styling:

body{
    height:4000px;
}

#bar{
    position:fixed;
    background-color:red;
    width:100%;
    height:10px;
}​

And finally the jQuery code:

var bar = $('#bar'),
    $window = $(window),
    docHeight = $(document).height(),
    baseX = $window.height() / docHeight * 100;

bar.css('background', '-webkit-linear-gradient(left, red '+ baseX +'%, green '+ baseX +'%)');

$window.scroll(function(e) {      
    var x = $window.scrollTop() / docHeight * 100 + baseX;
    bar.css('background', '-webkit-linear-gradient(left, red '+ x +'%, green '+ x +'%)');
});

​You can find a working example in jsfiddle.

Note that this only works in Google Chrome, as I have only used -webkit-linear-gradient. If you want to make sure it works in all browsers you should add its specific property. You may find useful Prefixr for that.

9
+50

You can use .scroll() to capture scroll events using jquery.

$(window).scroll(function() {...})

Inside this function you can get scroll height using .scrollTop() function.

var height = $(window).scrollTop()

once you get the height, you can then set the progress-bar.

You can get page height using this function:

$(document).height();

So that you can calculate percentage to set progress-bar position.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.