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

时间:2012-07-27 11:10:04

标签: javascript jquery css

与此争吵了一段时间。看起来很简单,但我似乎缺乏使其工作所需的逻辑。

我想将垂直.scrollTop位置转换为表示文档中用户垂直位置的水平条。

我觉得我的数学很可怕;我准备好被火焰击落。

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

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

这是我到目前为止的fiddle。 'place'div不想移动。

1 个答案:

答案 0 :(得分:1)

首先将滚动位置转换为百分比

 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