下にスクロールすると、ナビゲーションが隠れるJavaScriptです。

上にスクロールするとナビゲーションが現れます。

↓以下が実際のソースサンプルです。
▼JavaScript

$(function() {
    var menuHeight = $("#menu").height();
    var navPos = 0;
    $(window).scroll(function () {
        var Pos = $(this).scrollTop();
        if (Pos > navPos) {
            if ($(window).scrollTop() >= 100) {
                $("#menu").css("top", "-" + menuHeight + "px");
            }
        } else {
            $("#menu").css("top", "0px");
        }
        navPos = Pos;
    });
});

▼CSS

nav{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    transition: .3s;
}

ul{
    width: 100%;
}

li{
    width: 20%;
    float: left;
    text-align: center;
}

▼HTML

今回、参考にさせていただいたのは、
『Webpark – ウェブサイト作成に役立つことをいろいろと』さんです。
ありがとうございます。

デモページは、こちら