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:

![enter image description here](https://i.stack.imgur.com/cZdO5.jpg)