导航进度条

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.

Answer 2

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

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

在此函数中,您可以使用.scrollTop()函数获得滚动高度.

var height = $(window).scrollTop()

一旦达到高度,就可以设置进度条.

您可以使用此功能获取页面高度:

$(document).height();

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