jQuery – 在垂直滚动时水平移动对象答案

【问题标题】：jQuery – move object horizontally on vertical scrolljQuery – 在垂直滚动时水平移动对象
【发布时间】：2013-04-16 05:55:43
【问题描述】：

这更像是一个数学问题而不是编程。

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

滚动位置“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.net/BA5p4

标签： jquery horizontal-scrolling

【解决方案1】：

查看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）。

调整窗口宽度和文档高度以防止对象超出窗口。

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

【讨论】：

天哪。非常感谢森！高5！