下スクロールで消えて、上スクロールで表示されるヘッダ

下スクロールで消えて、上スクロールで表示される
というサンプルです。

See the Pen 下スクロールで消えて、上スクロールで表示されるヘッダ by takapen (@takapen) on CodePen.

  
logo

body {
  height:5000px;
}


.header {
 width: 100%;
 background: #ccc;
 position: fixed;
 top: -100px;
  left: 0;
 z-index: 10;
  transition: 0.3s ease-in-out;
}
.header._show {
 position: fixed;
 top:0;
 left: 0;
}

jQuery使用

  var pos = 0;
  $(window).on('scroll', function(){

    if($(this).scrollTop() > 60 ){
      if($(this).scrollTop() < pos ){
        //上スクロール時に表示
        $('.header').addClass('_show');
      }else{
        //下スクロール時に表示
        $('.header').removeClass('_show');
      }
    } else {
      $('.header').addClass('_show');
    }

    //スクロールが停止した位置を保持
    pos = $(this).scrollTop();
  });