<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script><!--topmenu_fixed-->
<script type="text/javascript" charset="utf-8">
        $(function() {$(function(){
    var menu = $('#menu'),
        pos = menu.offset();
        
        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });
});
});</script>

<style TYPE="text/css">
#navi {}
#menu {text-align: center;margin: 0 auto;padding: 0;}
.fixed {position: fixed;top: -5px;left: 0;width: 100%;
    box-shadow: 0 0 40px #000;
    -webkit-box-shadow: 0 0 40px #000;
    -moz-box-shadow: 0 0 40px #000;
</style> 
 

<div id="navi">
    <div id="menu" class="default">메뉴</div>
   </div>