Question

Been battling with this for a while. Seems simple enough but I seem to lack the logic required to get it to work.

I want to convert the vertical .scrollTop position to a horizontal bar that represents the users vertical position in the document.

I think my math is terrible; am ready to be shot down in flames.

var pos = $("#content").scrollTop();
var convert = (pos / 1024);

$(document).scroll(function() {
    $(".place").animate({
        left: '+=' + pos
    }, slow);
});​

Here’s a fiddle of where I am so far. The ‘place’ div doesn’t want to move.

Answer 1

Start by converting the scroll position into a percentage

 var s = $(window).scrollTop(),
    d = $(document).height(),
    c = $(window).height();
  var percent =  scrollPercent = (s / (d-c))

then get your current position by using that percentage for the width of the .placebar

var newPos = percent*1024;

if(newPos > 984) { //check to stop limit
   newPos = 984;
}

$("#place").stop().animate({
    left: newPos +"px"
});

Fiddle