导航进度条

Question

我试图建立进度菜单栏（类似于一个在picc​​sy投资者http://www.piccsy.com/investors/）

它可以测量页面的高度和进步％。

关于如何做到这一点的任何想法？

谢谢， 尼古拉。

Answer 1

在这里你有这个问题的解决方案。

首先的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 = $(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 +'%)'); 
}); 

你可以找到jsfiddle工作示例。

请注意，这只适用于谷歌浏览器，因为我只使用-webkit-linear-gradient。如果你想确保它适用于所有的浏览器，你应该添加它的特定属性。你可能会发现有用的Prefixr。

Answer 2

您可以使用.scroll（）使用jquery捕获滚动事件。

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

这个函数里面可以使用.scrollTop（）函数获得滚动高度。

var height = $(window).scrollTop() 

一旦你获得了身高，你就可以设置进度条了。

您可以使用此功能让页面高度：

$(document).height(); 

这样就可以计算出百分比来设置进度条位置。