efeito deslocamento horizontal

by Felype Rennan

HTML

Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />
Lorem<br />
Ipsum<br />
Dolor<br />

<div id="horizontal">test</div>

CSS

#horizontal {
    position: fixed;
    width: 200px;
    height: 300px;
    background: red;
    left: 0;
    top: 50px;
}

JavaScript

$(document).ready(function () {
    var $horizontal = $('#horizontal');
    
    $horizontal.posicionar = function() {
        var s = $(this).scrollTop(),
        d = $(document).height(),
        c = $(this).height();
        
        scrollPercent = (s / (d - c));
        
        var position = -$horizontal.width() + (scrollPercent * ($(document).width()+$horizontal.width()+8));
        
        $horizontal.css({
            'left': position
        });
    }
    $(window).scroll($horizontal.posicionar);
    $horizontal.posicionar();
});