导航进度条 [英] Navigation progress bar

问题描述

我想建立进度选单列（类似于piccsy投资者的 http：// www。 piccsy.com/investors/ ）

它测量网页的高度和进度％。

感谢您，
Nikola。

解决

首先是div：

 < div id =bar>< / div> 
  

现在一些样式：

  body {
 height：4000px; 
} 
 
 #bar {
 position：fixed; 
 background-color：red; 
 width：100％; 
 height：10px; 
} 
  

最后是jQuery代码：

  var bar = $（'＃bar'），
 $ window = $（window），
 docHeight = $ （），
 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 '-webkit-linear-gradient（left，red'+ x +'％，green'+ x +'％）'）; 
} 
  

您可以在 jsfiddle 。

请注意，这仅适用于Google Chrome，因为我只使用 -webkit-linear-gradient 。如果你想确保它在所有浏览器中都有效，你应该添加它的特定属性。您可能会发现有用的前缀。

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.

解决方案

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.

这篇关于导航进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！