コピペでOK!
スクロールに追従するメニューの実装

2023.12.13

はじめに

概要

今回は、当ページで実装済みのスクロールに応じてメニューの表示・非表示を切り替える実装を行います。具体的には、javascriptとCSSを使用してこの機能を実現します。スクロールイベントを監視し、メニューの表示状態を切り替えるためのコードを書いていきます。CSSを使用して、メニューのデザインや配置を調整することもできます。この実装により、ユーザーがページをスクロールするたびに、メニューが自動的に表示または非表示になるようになります。ユーザビリティの向上や、見た目の統一感を実現するために、このような機能を追加することは非常に重要です。是非、この実装方法を試してみてください。

目的

実装内容
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

実装内容

スクロールに応じて、メニューが表示されたり非表示になるように実装します。これは、このページのヘッダーメニューが行っている動作と同様です。

コード

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