垂直滚动时水平移动div(jquery或CSS3)

时间:2013-08-20 10:47:07

标签: jquery css3 scroll

当页面向下或向上滚动时,我想从左向右移动div。 当页面向下滚动时,它应向右移动,当页面向上滚动时,它应向左移动。

1 个答案:

答案 0 :(得分:11)

在这里看一个小例子,红色框会根据您垂直滚动的页面百分比水平滚动:

$(document).ready(function () {
    var $horizontal = $('#horizontal');

    $(window).scroll(function () {
        var s = $(this).scrollTop(),
            d = $(document).height(),
            c = $(this).height();

        scrollPercent = (s / (d - c));

        var position = (scrollPercent * ($(document).width() - $horizontal.width()));

        $horizontal.css({
            'left': position
        });
    });
});

工作演示:http://jsfiddle.net/PvVdq/