Соедините ширину div с scrollTop() с помощью jQuery/javascript

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, из-за различий в том, что полоса прокрутки hei GHT вызывает себя)

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