如何实现横向页面高度进度？

Question

我最近被问到如何使用jQuery创建水平页面高度进度条，类似于此处的http://www.piccsy.com/investors/。我环顾四周，无法通过谷歌搜索和旧的jQuery插件库找到任何东西。

有谁知道如何实现这种效果？我认为它与$（'＃containerDiv'）。scrollTop（）有关，但我对该方法并不熟悉。

Answer 1

使用scrollTop（）;

是正确的

这是使用窗口高度的示例，但可以轻松应用于容器div。

$(document).scroll(function(){
var theDistance =  $(window).scrollTop(),
      theHeight = $(document).height(),
  heightPercent = theDistance/theHeight*100;

  console.log(heightPercent);

});

参见示例：http://jsbin.com/ikakim/1/edit

这将以百分比的形式记录您距离滚动区域顶部的距离。因此，如果你是一半，heightPercent将是“50” - 从这里你可以设置一个水平线宽或东西为其总大小的50％。

请注意，由于滚动条高度的原因，在击中底部（当前记录最多~97最大值）时可能会出现一些问题。