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:

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