jquery - 导航进度条

Question

我正在尝试构建进度菜单栏(类似于 piccsy 投资者 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中找到一个工作示例.

请注意，这仅适用于 Google Chrome，因为我只使用了 -webkit-linear-gradient。如果您想确保它适用于所有浏览器，您应该添加其特定属性。您可能会发现有用Prefixr为此。