【jQuery不要】スクロールでヘッダーをヌルッと表示させる方法

2022/01/08 2022/04/10

Webサイトでよく見かける、スクロールするとヘッダーがヌルッと出てくるあの仕様。

手軽に実現できないかどうか考え、JavaScriptのみで実装する方法を考えたのでご紹介します。2タイプ用意しており、コピペで簡単に使うことができます。

CodePenのデモを埋め込んでみたので、実際にスクロールして遊んでみてください。

HTML
スクロールで表示して固定
下スクロールで表示＆上スクロールで非表示

HTML

基本的なHTMLの構成は以下の通りです。

<body>
  <header>Header</header>
  <div id="fixed-header">Fixed Header</div>
  <div id="content">
    ...
  </div>
  <footer>Footer</footer>
</body>

スクロールで表示するヘッダーは#fixed-headerです。

スクロールで表示して固定

下スクロールで100pxを過ぎたタイミングで、隠していた#fixed-headerを表示させます。

CSS

body {
  background: #fff;
  margin: 0;
}
header {
  width: 100%;
  font-size: 2em;
  text-align: center;
  color: #fff;
  background: linear-gradient(100deg, dodgerblue, purple);
  padding: .5em;
  box-sizing: border-box;
}
#fixed-header {
  position: fixed;
  top: -70px;  
  width: 100%;
  height: 70px;
  line-height: 70px;
  font-size: 2em;
  text-align: center;
  color: #fff;
  background: black;
  box-sizing: border-box;
  transition: .5s; /* アニメーションタイミング */
}
#fixed-header.is-show {
  top: 0;
}
#content {
  height: 2000px;
}
.text {
  font-size: 2em;
  text-align: center;
  margin: 2em 0 0;
}
footer {
  width: 100%;
  font-size: 2em;
  text-align: center;
  color: #444;
  background: #f3f7f9;
  padding: .5em;
  box-sizing: border-box;
}

JavaScript

(function() {
  const fh = document.getElementById('fixed-header');
  window.addEventListener('scroll', () => {
    if (window.pageYOffset > 100) {
      fh.classList.add('is-show');
    } else {
      fh.classList.remove('is-show');
    }
  });
}());

#fixed-headerの要素を取得し、100pxを超えてスクロールした場合に.is-showクラスを追加して表示させます。アニメーションのタイミングはコメントを入れたtransition部分で調整してください。

下スクロールで表示＆上スクロールで非表示

先ほどのものと同様、下スクロールのときに隠していた#fixed-headerを表示させますが、上スクロール時は非表示にします。上側のコンテンツが見やすくなるので良いですね。

CSS

body {
  background: #fff;
  margin: 0;
}
header {
  width: 100%;
  font-size: 2em;
  text-align: center;
  color: #fff;
  background: linear-gradient(100deg, dodgerblue, purple);
  padding: .5em;
  box-sizing: border-box;
}
#fixed-header {
  position: fixed;
  top: -70px;  
  width: 100%;
  height: 70px;
  line-height: 70px;
  font-size: 2em;
  text-align: center;
  color: #fff;
  background: black;
  box-sizing: border-box;
  transition: .5s; /* アニメーションタイミング */
}
#fixed-header.is-show {
  top: 0;
}
#content {
  height: 2000px;
}
.text {
  font-size: 2em;
  text-align: center;
  margin: 2em 0 0;
}
footer {
  width: 100%;
  font-size: 2em;
  text-align: center;
  color: #444;
  background: #f3f7f9;
  padding: .5em;
  box-sizing: border-box;
}

JavaScript

(function() {
  const fh = document.getElementById('fixed-header');
  const isUp = (function() {
    const scrollElement = document.scrollingElement;
    let flag, prePoint, scrollPoint;
    return function() {
      scrollPoint = scrollElement.scrollTop;
      flag = prePoint > scrollPoint ? true : false;
      prePoint = scrollPoint;
      return flag;
    }
  }());
  
  window.addEventListener('scroll', () => {
    if (window.pageYOffset > 100) {
      if (isUp()) {
        fh.classList.remove('is-show');
      } else {
        fh.classList.add('is-show')
      }
    } else {
      fh.classList.remove('is-show');
    }
  })
}());