もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

ちょうど実装の案件があったので、忘備録としてTipsに転載します。
グローバルメニューを含んだヘッダーがページ上部に常に表示されているのは便利ですが、コンテンツの閲覧時には不要ですよね。特にコンテンツに集中しているときには隠れていてほしい。それを実現するスクリプトです。

HTML

<header id="siteHeader">
  ヘッダー
</header>

CSS

#siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: #333;
  color: #fff;
  line-height: 70px;
  text-align: center;
  transition: transform 0.3s ease;
  z-index: 1000;
}

/* 非表示状態 */
#siteHeader.hide {
  transform: translateY(-100%);
}

Javascript

$(function () {
  var lastScrollTop = 0;
  var header = $('#siteHeader');
  var delta = 5; // 小さいスクロールを無視する閾値
  $(window).on('scroll', function () {
    var scrollTop = $(this).scrollTop();

    // 微小スクロールは無視
    if (Math.abs(lastScrollTop - scrollTop) <= delta) {
      return;
    }

    if (scrollTop > lastScrollTop) {
      // 下スクロール → 隠す
      header.addClass('hide');
    } else {
      // 上スクロール → 表示
      header.removeClass('hide');
    }
			if (scrollTop <= 0) {
  header.removeClass('hide');
}

    lastScrollTop = scrollTop;
  });
});