Animate div to snap to element most in view
<p>I have a series of  elements, one beneath the next.  There will be content at the top of each of these  elements but a space at the bottom over which a horizontal bar will sit.</p>

<p>There is only one horizontal bar on the page.  It needs to be 'fixed' to the bottom of the first  element until that element is scrolled out of view, at which point it needs to animate to the bottom of the currently-in-view  element.</p>

<p>I've mocked up a fiddle which shows some logic for highlighting the currently active section, which I'm happy with.  The sections are grey by default.  The most-in-view section as you scroll up and down turns red to indicate that it's the active section - which works fine.  The horizontal bar is in blue.</p>

<p>What I'm struggling with is getting the blue bar to animate down to the bottom of the red section as it changes on scroll.</p>

<p><a href="http://jsfiddle.net/9kW5N/2/" rel="nofollow">http://jsfiddle.net/9kW5N/2/</a></p>

<p>The main reason my code in the fiddle isn't working I think is because the window scroll event isn't 'live' so doesn't know what the currently active (red) section is.</p>

<p>Can anyone suggest how to achieve this?</p>

<p>Thanks for any pointers folks!</p>
