导航进度条答案

【问题标题】：Navigation progress bar导航进度条
【发布时间】：2012-06-25 18:47:52
【问题描述】：

我正在尝试构建进度菜单栏（类似于 piccsy 投资者http://www.piccsy.com/investors/ 上的一个）

它测量页面的高度并进度%。

有什么想法吗？

谢谢，尼古拉。

【问题讨论】：

标签： jquery css progress-bar

【解决方案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。

【讨论】：

【解决方案2】：

您可以使用 .scroll() 来捕获使用 jquery 的滚动事件。

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

在此函数中，您可以使用 .scrollTop() 函数获取滚动高度。

var height = $(window).scrollTop()

获得高度后，您可以设置进度条。

您可以使用此函数获取页面高度：

$(document).height();

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

【讨论】：