jQuery Scroll/Menu Issue

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.

<div id="div_header">
    <img src="images/logo.png" height="72px" class="logo" />
</div>

<div id="mainMenu">
<ul>
    <li>
        <a class="menuItem">Link&开发者_C百科lt;/a>
    </li>
    <li>
        <a class="menuItem">Link</a>
    </li>
</ul>

#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;
}

Thanks for any help...

use position:fixed; in css (but as I know for IE6, 7 it not works correctly).

Otherwise take a look on this post on stackoverflow

update

$(window).scroll(function() {
    if ($(this).scrollTop() > $('#div_header').height()) {
        $('#mainMenu').css('top', $(this).scrollTop() + "px");
    }
    else {
        $('#mainMenu').css('top', $('#div_header').height() + "px");
    }
});

this code probably need some polishing but it's just an idea