jquery - 如何实现水平页高进度？

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）。