jQuery Scroll/Menu Issue
<p>Hi I have a menu that I would like to manipulate with some JS...I want the menu to be in a set spot when the page loads, but when the user scrolls down the page I would like the menu to move to a fixed position at the top of the window.  </p>

<pre><code>&lt;div id="div_header"&gt;
    &lt;img src="images/logo.png" height="72px" class="logo" /&gt;
&lt;/div&gt;

&lt;div id="mainMenu"&gt;
&lt;ul&gt;
    &lt;li&gt;
        &lt;a class="menuItem"&gt;Link&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a class="menuItem"&gt;Link&lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p></p>

<pre><code>#div_header {
background:url("../images/top-header.png") repeat-x scroll 0 0 transparent;
height:80px;
margin:0 0 10px;
position:relative;
z-index:3;
}

div#mainMenu {
position:relative;
text-align:center;
top:-16px;
z-index:2;
background:url(../images/bg_menu.png) repeat-x;
width:100%;
height:41px;
}
</code></pre>

<p>Thanks for any help...</p>
