垂直滚动时水平移动 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屋！