SWELL | スクロールの途中で消えて、上にスクロールすると復活するヘッダーの作り方

/* ヘッダーを浮かせる */
.l-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  animation: DownAnime 0.5s forwards;
}

/* ヘッダーの次の要素の上部に余白を設定（PC） */
.l-header+* {
  margin-top: 94px;
}

/* ヘッダーの次の要素の上部に余白を設定（Tab以下） */
@media screen and (max-width:960px) {
  .l-header+* {
    margin-top: 48px;
  }
}

/* 上に上がる動き */
.l-header.UpMove {
  animation: UpAnime 0.5s forwards;
}

/* アニメーションを定義 */
@keyframes UpAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}

@keyframes DownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

let beforePos = 0; // スクロールの前の位置を保存するための変数

function scrollAnime() {
    const elemTop = document.getElementById('main_content').offsetTop; // #main_contentの上端の位置を取得
    const scroll = window.pageYOffset || document.documentElement.scrollTop; // 現在のスクロール位置を取得
    const header = document.querySelector('.l-header');

    if (elemTop > scroll || 0 > scroll - beforePos) {
        // スクロールが#main_contentの位置よりも上であるか、スクロールが前回より上に移動した場合
        header.classList.remove('UpMove'); // .l-headerからUpMoveクラスを削除
        header.classList.add('DownMove'); // .l-headerにDownMoveクラスを追加
    } else {
        // スクロールが#main_contentの位置よりも下である場合
        header.classList.remove('DownMove'); // .l-headerからDownMoveクラスを削除
        header.classList.add('UpMove'); // .l-headerにUpMoveクラスを追加
    }
    beforePos = scroll; // 現在のスクロール位置をbeforePosに保存
}

window.addEventListener('scroll', scrollAnime); // スクロールイベントが発生したらscrollAnime関数を実行する