How do I synchronize the scroll position of two divs?
<p>I want to have 2 divs sized to a particular width (i.e. 500px). One above the other aligned horizontally.</p>

<p>The top box should hide its scroll bar, the bottom should show a scroll bar and when the user scrolls I'd like the offset of the top box to change to the value of the bottom box. So that when the bottom DIV scrolls horizontally it appears that the top DIV is also scrolling in unison.</p>

<p>I'm happy to do this in Jquery if it makes the process easier.</p>
