垂直滚动时移动div（jquery或CSS3） [英] Move div horizontally when scroll vertically ( jquery or CSS3)

问题描述

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

I want to move a div from left to right, when page is scroll down or up. When page scroll down it should move right and when page is scroll up it should move left.

推荐答案

请参阅此处。
当页面向下滚动时，应向右移动，向上滚动时应向左移动。一个小例子，红色框将根据垂直滚动的页面的百分比水平滚动：

See here a little example, a red box will scroll horizontally according to the percentage of the page you scrolled vertically:

$(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/

这篇关于垂直滚动时移动div（jquery或CSS3）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！