使用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我采取了一个黑客：

$(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);
    });
});