Scrolling an alternative direction with the content below it

Question

I have 2 full div heights. When you scroll down a page, one div scrolls up and the other scrolls in the opposite direction. This works great.

I try to keep this effect, but put normal full-width content under it, trying to keep the natural scroll. So I would like to keep the alternative scroll effect, but when I get to the bottom of the last div that uses this effect, I would like to continue scrolling in normal mode to see the normal content under it.

Here is my jsFiddle, currently it is floating over the effect I am referring to: http://jsfiddle.net/u9apC/116/ , and JS is inserted below for reference:

(function ($) { var top = 0; $(document).ready(function () { var contentHeight = $('.right').height(), contents = $('.right > .content').length; top = (0 - (contentHeight * (contents - 1))); $('.right').css('top', top + 'px'); }); $(window).resize(function () { var contentHeight = $('.right').height(), contents = $('.right > .content').length; top = (0 - (contentHeight * (contents - 1))); $('.right').css('top', (top + $(window).scrollTop()) + 'px'); }); $(window).scroll(function () { $('.right').css('top', (top + $(window).scrollTop()) + 'px'); }); })(jQuery); 

EDIT

Here is an illustration of what I want:

Answer 1

I hope this is what you need - it's a little hard to imagine from the description.

There are a few tricks to make this work:

• Reverse scroll direction when top right call is positive

• Make sure that the .row div has an upper edge sufficient to push on the bottom of the left column.

   (function ($) { var top = 0; var contentHeight = 0; $(document).ready(function () { calcContentHeight(); }); $(window).resize(function () { calcContentHeight(); }); $(window).scroll(function () { setRightTop(); }); function calcContentHeight() { var contents = $('.right > .content').length - 1; contentHeight = $('.right').height() * contents; top = 0 - contentHeight; setRightTop(); } function setRightTop() { var rightTop = top + $(window).scrollTop(); //1. don't allow right col top to go positive if(rightTop > 0) rightTop = 0 - rightTop; $('.right').css('top', rightTop + 'px'); //2. Ensure .row has sufficient top margin $('.row').css('margin-top', contentHeight + 'px'); } })(jQuery); 

See the updated JSFiddle here: http://jsfiddle.net/u9apC/126/

I also revised your code a bit to reduce duplication.

Answer 2

You just need to make the height of the div.body equal to the total height of the elements inside it. Either js or css.