如何实现横向页高进度？

Question

最近有人问我如何使用 jQuery 创建一个水平页面高度进度条，类似于这里的：http://www.piccsy.com/investors/。我环顾四周，通过 Google 搜索和旧的 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）可能会出现一些问题。