javascript - 使用 jQuery / javascript 将 div 的宽度连接到 scrollTop() 值

Question

我正在尝试为网站制作滚动进度条。基本上，我希望 div 的宽度（带有彩色背景）与用户向下滚动的距离相关联。

我对 jQuery 很陌生——这只是我的第二个项目。关于如何让它工作的任何想法？

这是我的 HTML：

<div class="scroll-progress"></div>

这是CSS：

.scroll-progress {
  width:10px; height:10px;
  background-color:green;
  position:fixed;
  top:0em;
  left:0em;
}

以及我在 jQuery 上的一个 hack：

$(document).ready(function(){

  $(window).scroll(function(){

var docHeight = $(document).height();
var scrollDepth = $(window).scrollTop(); 
var scrollPercent = parseFloat(scrollDepth / docHeight) * 100;


  $(".scroll-progress").css(width,scrollPercent);


  });
});

Answer 1

我稍微开发了您的项目，检查一下：（乘数是 103，而不是 100，因为滚动条高度本身会造成差异）

http://jsfiddle.net/tdBfD/5/

$(document).ready(function(){
    $(window).scroll(function(){
        var docHeight = $(document).height();
        var ScrollTop = $(window).scrollTop();
        var NewWidth = (ScrollTop / docHeight) * 103
        $(".scroll-progress").width(NewWidth);
    });
});