html

<div class="section s0">
        <nav class="nav">
        <ul>
            <li><a href="#"><span>네비게이션1</span></a></li>
            <li><a href="#"><span>네비게이션2</span></a></li>
            <li><a href="#"><span>네비게이션3</span></a></li>
            <li><a href="#"><span>네비게이션4</span></a></li>
            <li><a href="#"><span>네비게이션5</span></a></li>
        </ul>
    </nav>

-- 내용 --

</div>

css

.s0{
    background:lightblue;
    padding-top:30px;
}

.nav{
    width:80%;
    min-width:1000px;
    height:70px;
    background:#666666;
    margin:0 auto;
    position:static;
    z-index:999999;
    left:10%;
    top:-100px;
    
    
}

js

$(window).scroll(function(){
        var st=$(window).scrollTop();
        if(st>150){
            $(".s0").css({
                "padding-top":0
            });
            $(".nav").css({
                position:"fixed",
                width:"100%",
                left:0,
                transition:"0.5s"
                
            });
            $(".nav").stop().animate({
                top:0,
                
            });
        }else{
            $(".s0").css({
                "padding-top":30
            });
            $(".nav").css({
                position:"static",
                width:"80%",
                left:"10%",
                transition:"0.5s"
                
            });
            $(".nav").stop().animate({
                top:-100,
                
            });
        }
    });