将垂直滚动转换为水平div位置jQuery



与此斗争了一段时间。看起来很简单,但我似乎缺乏让它发挥作用所需的逻辑。

我想把垂直的.scrollTop位置转换成一个水平条,表示用户在文档中的垂直位置。

我觉得我的数学很糟糕;我准备在火焰中被击落。

var pos = $("#content").scrollTop();
var convert = (pos / 1024);
$(document).scroll(function() {
    $(".place").animate({
        left: '+=' + pos
    }, slow);
});​

这是我目前的状况。"位置"div不想移动。

通过将滚动位置转换为百分比开始

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

然后使用该百分比作为.placebar 的宽度来获得您的当前位置

var newPos = percent*1024;
if(newPos > 984) { //check to stop limit
   newPos = 984;
}
$("#place").stop().animate({
    left: newPos +"px"
});

Fiddle

最新更新