【JavaScript】上スクロールすると出現するheaderの作り方【jQuery未使用】

上スクロールするとふわっと出現するheaderを、素のJavaScriptのみで実装します。
ユーザービリティの高いヘッダーの挙動だと思うので、よければ参考にしてみてください！

成果物

下スクロールすると要素が消えて、上スクロールすると要素が現れます。
※今回はJavaScriptの解説がメインなので、header本体のスタイリングについては触れません。

See the Pen Untitled by ryowa.kitazawa (@ryowakitazawa82) on CodePen.

事前準備

headerにidを指定

JavaScriptで要素をとってくるために必要な記述です。

<header class="header"　 id="header">

removeクラスを作成

非表示にしたときのスタイリングです。
opacityを0にして透明にしましょう。
aタグなどを付与した時も考え、user-selectもnoneに。

#header.remove {
  opacity: 0;
  user-select: none;
}

headerにtransitionを指定

自然にふわっと表示させるために、transitionを設定しましょう。
要素の重なりも考えて、z-indexも設定しておくと良いと思います。

header {
    opacity: 1;
    transition: 0.5s;
    z-index: 100;
}

JavaScriptの記述

では、JavaScriptを記述を解説していきます。

header要素をとってくる

まずは先ほどheaderに指定したidを利用して、header要素をとってきましょう。

const header = document.getElementById('header'); // まずはheader要素をとってくるよ。

初期値と現在地を変数で指定

後々の処理で必要になる記述です。
値はそれぞれ適当に、0としておきましょう。

let startPosition = 0; // headerのY座標の初期値を変数で指定しておくよ。
let NowPosition = 0; // headerのY座標の現在値を変数で指定しておくよ。

スクロールイベントを設定

windowにスクロールイベントを設定しましょう。
引数なしのアロー関数で書くのが記述量が少なくて良いでしょう。

window.addEventListener('scroll', () => {
 });

headerのY座標の現在値を更新

スクロールされたらheaderのY座標の現在値を更新をしましょう。
次のif文で、必要な処理になります。

 NowPosition = window.scrollY; // headerのY座標の現在値を更新。

条件に応じてheaderにremoveクラスを付与する

準備段階で記述したremoveクラスの登場です。
このクラスを付け外しすることで、ヘッダーの表示・非表示を切り替えます。
初期値より現在値が大きい時にremoveクラスを付与、初期値より現在値が小さい時にremoveクラスを外します。

if(NowPosition >= startPosition) {
            header.classList.add('remove');
        } else {
            header.classList.remove('remove');
        }

初期値を更新

最後に初期値を更新してあげましょう。
初期値という少々わかりにくい表現をしていますが、要はNowPositionが更新される1つ前の値をこのstartPositionにいれています。
これにより、下スクロールした時にif文がtrueになり、removeクラスが付与されてheader要素が消えるのです。
逆に上スクロールしたときには、removeクラスが外れてheader要素が出現します。

startPosition = NowPosition; // 初期値を更新。