Move div horizontally when scroll vertically ( jquery or CSS3)

问题

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.

回答1:

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
        });
    });
});

Working demo: http://jsfiddle.net/PvVdq/

来源：https://stackoverflow.com/questions/18333085/move-div-horizontally-when-scroll-vertically-jquery-or-css3