SOURCE

//滚动条滚动显示或隐藏nav
$(function() {
    var scLast = 0,
        oNav   = $('.nav');
    $(window).scroll(function () {
        var scTop = $(this).scrollTop();

        if(scTop > scLast && scTop > oNav.height()) {
            oNav.css('top', '-50px');
        } else {
            oNav.css('top', 0);
        }
        scLast = scTop;
    });
});

<div class="nav">nav</div>
<div class="d1"></div>

/*css reset */
body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav {
    margin: 0;
    padding: 0;
}
body {
    font: 14px Microsoft YaHei;
} 
a {
    text-decoration: none; 
} 
ol,ul {
    list-style: none;
} 

.nav {
    width: 100%;
    height: 50px;
    background: #09d;
    position: fixed;
    top: 0;
    left: 0;
    transition: top .3s;
}
.d1 {
    width: 100px;
    height: 1500px;
    margin: 100px auto;
    background: #f8f8f8;
}