Move div horizontally when scroll vertically ( jquery or CSS3)

css, jquery, scroll

Solution

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/

Problem

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.

Original source