演示请看本站导航，不支持IE678。
HTML（header-navigation是用来指定导航样式的，id=header是用来驱动js的，这里id要和下面js里的document.getElementById相同）

header class="header-navigation" id="header"
 这是导航
/header

CSS

.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;
    }

/* 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

<script type="text/javascript">
    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;
    });
</script>

Tags：顶部导航, js, css3, 滚动隐藏