Start and stop div scrolling between two other divs
<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>
