Question

I like to change the direction of scroll in opposite direction for specific column. I tried searching google, but i don’t find any solution. To give an example, take this…

jFiddle : http://jsfiddle.net/yLHeC/1/

There are three columns,

left, center, right. Each column height is 5000px. The center column has negative margin of 4500px. Now when user scroll, left and right should be as usual, but the center should scroll from bottom to top. Hope you got it.

Example site : http://www.ballantyne.it/

.left{
height:5000px;
}

.center{
height:5000px;
margin-top:-4500px;
}

.right{
height:5000px;
}

Answer 1

you have to add a container for the center column, set it’s overflow to hidden, height to window’s height and then using $(window).scroll() event append $(document).height() - $(window).scrollTop() to the center column – this should work for you

EDIT: here is the code http://jsfiddle.net/yLHeC/30/ and explanation:

$(document).ready(function(){
    var CONSTANT_OFFSET = -200; // starting position
    $(window).scroll(function(){
       $('.center').css('margin-top', CONSTANT_OFFSET + $(this).scrollTop()*2 + 'px'); 
    }).scroll();
});