title: Alternate direction scrolling with content underneath
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Here's my jsFiddle, currently its floating over the effect I refer to: <a href="http://jsfiddle.net/u9apC/116/" rel="nofollow noreferrer">http://jsfiddle.net/u9apC/116/</a> and the JS is pasted below for reference:</p>
  
  <pre><code>(function ($) {
  var top = 0;
  
  $(document).ready(function () {
      var contentHeight = $('.right').height(),
          contents = $('.right &gt; .content').length;
  
      top = (0 - (contentHeight * (contents - 1)));
  
      $('.right').css('top', top + 'px');
  });
  
  $(window).resize(function () {
      var contentHeight = $('.right').height(),
          contents = $('.right &gt; .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);
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here's a illustration of what I want:</p>
  
  <p><img src="https://i.stack.imgur.com/cZdO5.jpg" alt="enter image description here"></p>