title: Start and stop div scrolling between two other divs
body: <p>Someone else recently helped me out with the start of this question but I'm after a little more help. I currently have this working - </p>
  
  <pre><code>var windw = this;
  
  $.fn.followTo = function ( elem ) {
  var $this = this,
      $window = $(windw),
      $bumper = $(elem),
      bumperPos = $bumper.offset().top,
      thisHeight = $this.outerHeight(),
      setPosition = function(){
          if ($window.scrollTop() &gt; (bumperPos - thisHeight)) {
              $this.css({
                  position: 'absolute',
                      top: (bumperPos - thisHeight)
                  });
              } else {
                  $this.css({
                      position: 'fixed',
                      top: 0
                  });
              }
          };
      $window.resize(function()
      {
          bumperPos = pos.offset().top;
          thisHeight = $this.outerHeight();
          setPosition();
      });
      $window.scroll(setPosition);
      setPosition();
  };
  
  $('#one').followTo('#two');
  </code></pre>
  
  <p>Example here - <a href="http://jsfiddle.net/Tgm6Y/1447/" rel="nofollow">jsFiddle</a></p>
  
  <p>This stops a div from scrolling once it reaches the border of another div - works great. What I'm stuck trying to figure out now is how I can make the scrolling div START at a div, then scroll down and stop at another div as it does in this example. Anyone got any ideas? </p>
  
  <p>Here's a terrible illustration of it - <a href="http://jsfiddle.net/Tgm6Y/1450/" rel="nofollow">jsFiddle</a>. The blue section SHOULD sit underneath the yellow section until you reach it. I just can't figure out how that's possible due to my limited brain function. </p>
  
  <p>Thanks a lot for any help. </p>