title: Stop div scrolling once it reaches another div
body: <p>Basically I currently have a div which stays fixed and follows the user down as they scroll until it reaches a certain point. I can easily make it stop at a fixed pixel position as I have done in the below example, but because I'm a jQuery idiot I have no idea how to make it stop at a div instead. </p>
  
  <p>Here's what I've used so far:  </p>
  
  <pre><code>var windw = this;
  
  $.fn.followTo = function ( pos ) {
       var $this = this,
          $window = $(windw);
  
  $window.scroll(function(e){
      if ($window.scrollTop() &gt; pos) {
          $this.css({
              position: 'absolute',
              top: pos
          });
      } else {
          $this.css({
              position: 'fixed',
              top: 0
          });
      }
  });
  };
  
  $('#one').followTo(400);
  </code></pre>
  
  <p>Here's the example: <a href="http://jsfiddle.net/Tgm6Y/1445/" rel="noreferrer">jsFiddle</a></p>
  
  <p>The reason I want it to stop once it reaches a second div is because with the fluid layout I'm using, the second div will be sitting at different points depending on the browser size. Defining a specific point for it to stop at won't work. Anyone got any ideas as to how I can get this to do what I want? Alternatively, is it possible for the fixed div to stop scrolling once it reaches a percentage of the way down? I've looked around but haven't found anything.</p>
  
  <p>Thanks for any help.  </p>