Stick the menu to the top of the page on scroll down

Just a little something I wanted to try. Scroll down the page and watch the menu above stick to the top so it's always accessible. 

Here's the code used:

<script type="text/javascript">
var fixed_menu_hidden = true;
function dtbaker_scroll(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop>80){
        if(fixed_menu_hidden){
            $('#fixednav').fadeIn();
            fixed_menu_hidden = false;
        }
    }else{
        $('#fixednav').fadeOut();
        fixed_menu_hidden = true;
    }
}
window.onscroll = dtbaker_scroll;
$(function(){
    $('body').prepend('<div id="fixednav"><div></div></div>');
    $('#fixednav div').html($('#navigation ul').clone());
});
</script>
<style type="text/css">
#fixednav{
    position:fixed; 
    left:0; 
    right:0; 
    top:0; 
    height:39px; 
    background:#13B8D6; 
    display:none; 
    z-index:300;
}
#fixednav div{
    width:994px;
    margin:0 auto;
}
#fixednav ul{
    list-style:none;
    margin:0 0 0 110px;
    padding:0;
}
#fixednav ul li{
    list-style:none;
    margin:0;
    padding:0;
    float:left;
}
#fixednav ul li a{
    display:block;
    margin:0;
    padding:12px 13px 8px 13px;
    float:left;
    height:19px;
    border-left:1px solid #84daea;
    border-right:1px solid #15a1bb;
    font-family: Cuprum, Helvetica, 'Helvetica Neue', arial;
    font-size: 1.4em;
    text-transform:uppercase;
    text-decoration:none;
    color:#FFF;
}
#fixednav ul li a.selected{
    height:24px !important;
    background:#15a1bb url('/new/images/menu_arrow_down.gif') no-repeat center bottom !important;
    border-right:none;
    border-left:none;
    padding-left:14px;
    padding-right:14px;
}
#fixednav ul li a:hover{
    background:#15a1bb;
    height:19px;
    text-decoration:underline;
}
#fixednav ul li.first a{
    border-left:none;
    padding-left:14px;
}
#fixednav ul li.last a{
    border-right:none;
    padding-right:14px;
}
</style>