コード

javascript

function fixedHeader() {
  let fixedElm=document.querySelector(".header");
  let scrollPoint=0;
  let lastPoint=0;

  window.addEventListener("scroll", function() {
      scrollPoint=this.window.scrollY;

      if (scrollPoint > lastPoint) {
        fixedElm.classList.add("fixed-hide");
      }

      else {
        fixedElm.classList.remove("fixed-hide");
      }

      lastPoint=scrollPoint;
    });
}

fixedHeader()

以下に、関数の各部分の詳細な説明を提供します：

-let fixedElm = document.querySelector(“.header”);：この行では、ヘッダー要素を選択し、fixedElmという変数に保存しています。

-let scrollPoint = 0; と let lastPoint = 0;：この行では、現在のスクロール位置（scrollPoint）と最後のスクロール位置（lastPoint）を追跡するための変数を初期化しています。

-window.addEventListener(“scroll”, function() {…});：この行では、スクロールイベントリスナーをウィンドウオブジェクトに追加しています。これにより、ユーザーがページをスクロールするたびに指定した関数が実行されます。

-scrollPoint = this.window.scrollY;：この行では、現在のスクロール位置を取得しています。

-if (scrollPoint >lastPoint) {…} else {…}：この条件分岐では、現在のスクロール位置が最後のスクロール位置よりも大きい場合（つまり、ユーザーが下にスクロールしている場合）、ヘッダーを非表示にするクラス（fixed-hide）を追加します。それ以外の場合（つまり、ユーザーが上にスクロールしている場合）、ヘッダーを非表示にするクラスを削除します。

-lastPoint = scrollPoint;：この行では、最後のスクロール位置を現在のスクロール位置に更新しています。これにより、次回のスクロールイベントが発生したときに、スクロールの方向を正しく判断できます。この行は必須ではありませんが、イベントが適切なタイミングで正しく発火するために記述されています。

-fixedHeader();：この行では、ページが読み込まれたときにfixedHeader関数を実行しています。これにより、スクロールイベントリスナーがすぐに有効になります。

this.window.scrollY

this.window.scrollYは、ウェブページが垂直方向にどれだけスクロールされたかをピクセル単位で返すプロパティです。windowはブラウザのウィンドウを表し、scrollYは現在のスクロール位置の垂直座標です。この値は、ウィンドウの最上部がページの最上部にある場合は0になります。ユーザーがページを下にスクロールすると、この値は増加します。

CSS

if文で条件が満たされた際に以下のクラスがヘッダーに付与されます。

.fixed-hide {
    transform: translateY(-100px);
}

.fixed-hide クラスには transform プロパティが適用されており、Y軸に沿って上方向に100ピクセル分移動する効果があります。つまりスクロールした際に、このクラスがヘッダーに付与されることになり、ヘッダーが上方向に非表示になり、逆に下方向にスクロールした際にはクラスが削除されメニューが表示されます。

また、アニメーションを滑らかに実行するために以下のCSSを追加します。

CSS

.header {
  transition: 0.5s;
}