Déplacer horizontalement une div lors d'un défilement vertical ( jquery ou CSS3)

Question

Je veux déplacer un div de gauche à droite, lorsque la page est scrollée vers le bas ou vers le haut. Lorsque la page défile vers le bas, elle doit se déplacer vers la droite et lorsque la page défile vers le haut, elle doit se déplacer vers la gauche.

Answer 1

Voici un petit exemple : une boîte rouge défile horizontalement en fonction du pourcentage de la page que vous avez fait défiler verticalement :

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

Démonstration de travail : http://jsfiddle.net/PvVdq/