Navigation progress bar

问题

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.

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/11195398/navigation-progress-bar

标签

jquery

css3

progress-bar