Alternate direction scrolling with content underneath

Question

I have 2 full height divs. When you scroll down the page the one div scrolls up and the other scrolls in an opposite direction. This works great.

I'm trying to keep this effect but put normal full width content underneath it whilst trying to maintain natural scrolling. So I'd like to keep the alternate scrolling effect but when I get to the bottom of the last div that uses this effect I would like to continue scrolling normally to see normal content underneath it.

Here's my jsFiddle, currently its floating over the effect I refer to: http://jsfiddle.net/u9apC/116/ and the JS is pasted 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's a illustration of what I want:

Answer 1

I hope this is what you're after - it's a little hard to visualise from the description.

There are a couple of tricks to get this working:

1. Reverse the scroll direction when the right col top goes positive

2. Ensure the .row div has a top margin sufficient to push it down to the bottom of the left col.

   (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 updated JSFiddle here: http://jsfiddle.net/u9apC/126/

I've also refactored your code a little to reduce duplication.