jQuery – 在垂直滚动上水平移动对象

这比编程更像是一个数学问题.

我想在滚动文档时从浏览器窗口的左边缘到右边缘水平移动对象.

滚动位置“0”应该将对象带到窗口的最左侧,滚动位置“在文档末尾向下”应该将对象带到窗口的最右侧但不能进一步.

我尝试过但失败了：

var window_width = $(window).width();

$(window).scroll(function () { 
    var scroll_position = $(window).scrollTop();
    var object_position_left = scroll_position*(scroll_position/window_width);

    $('#object').css({'left':object_position_left});
});

http://jsfiddle.net/BA5p4/

解决方法

请参阅 jsFiddle中的演示

var window_width = $(window).width() - $('#object').width();

var document_height = $(document).height() - $(window).height();

$(function () {
    $(window).scroll(function () {
        var scroll_position = $(window).scrollTop();
        var object_position_left = window_width * (scroll_position / document_height);
        $('#object').css({
            'left': object_position_left
        });
    });
});

您只需将对象向左移动(基于window_width),向下滚动任何百分比(基于document_height).

调整窗口宽度和文档高度以防止对象进入窗口.

您可能需要在窗口重新调整大小时重新计算这些变量.