js鼠標滾動自動隱藏導航菜單

html代碼：

<header class="header-navigation" id="header">
    <nav> <a class="link" href="#" title="Home">首頁</a> <a class="link" href="#" title="About">關於我們</a> <a class="link" href="#" title="Contact">聯繫我們</a> </nav>
</header>
<div class="jq22-container">
    <div class="jq22-header">
        <h1>網站內容</h1>

    </div>
</div>

css代碼：

body {
    background:#494A5F;
    color:#D5D6E2;
    font-weight:500;
    font-size:1.05em;
    font-family:"Microsoft YaHei","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif;
}
a {
    color:rgba(255,255,255,0.6);
    outline:none;
    text-decoration:none;
    -webkit-transition:0.2s;
    transition:0.2s;
}
a:hover,a:focus {
    color:#74777b;
    text-decoration:none;
}
.jq22-container {
    margin:0 auto;
}
/* Header */
.jq22-header {
    padding:1em 190px 1em;
    letter-spacing:-1px;
    text-align:center;
}
.jq22-header h1 {
    color:#fff;
    font-weight:600;
    font-size:2em;
    line-height:1;
    margin-bottom:0;
}
.jq22-header h1 span {
    display:block;
    font-size:60%;
    font-weight:400;
    padding:0.8em 0 0.5em 0;
    color:#fff;
}
html,* {
    margin:0;
    padding:0;
}
html {
    min-height:300vh;
}
body {
    min-height:300vh;
    background-image:linear-gradient(120deg,#fccb90 0%,#d57eeb 100%);
}
.header-navigation {
    position:fixed;
    top:0;
    width:100%;
    height:60px;
    line-height:60px;
    background-color:#333;
    text-align:center;
    box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
    z-index:9999;
}
.link {
    color:#fff;
    text-decoration:none;
    margin:0 30px;
}
h1 {
    text-align:center;
    margin-top:170px;
    margin-bottom:50px;
    color:#fff;
}
/* Slide transitions */

    .slideUp {
    /* -webkit-transform:translateY(-100px);
    transform:translateY(-100px);
    */
      -webkit-transform:translateY(-100px);
    -ms-transform:translateY(-100px);
    -o-transform:translateY(-100px);
    transform:translateY(-100px);
    /*transition:transform .5s ease-out;
    */
      -webkit-transition:transform .5s ease-out;
    -o-transition:transform .5s ease-out;
    transition:transform .5s ease-out;
}
.slideDown {
    /*-webkit-transform:translateY(0);
    transform:translateY(0);
    */
      -webkit-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
    transform:translateY(0);
    /*transition:transform .5s ease-out;
    */
      -webkit-transition:transform .5s ease-out;
    -o-transition:transform .5s ease-out;
    transition:transform .5s ease-out;
}

js代碼：

var new_scroll_position = 0;
var last_scroll_position;
var header = document.getElementById("header");

window.addEventListener('scroll', function(e) {
    last_scroll_position = window.scrollY;

    // Scrolling down
    if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {
        // header.removeClass('slideDown').addClass('slideUp');
        header.classList.remove("slideDown");
        header.classList.add("slideUp");

        // Scrolling up
    } else if (new_scroll_position > last_scroll_position) {
        // header.removeClass('slideUp').addClass('slideDown');
        header.classList.remove("slideUp");
        header.classList.add("slideDown");
    }

    new_scroll_position = last_scroll_position;
});