みなさんこんにちは！
今回は自分のアウトプットと記録する意味を込めて記事を書いていこうと思います。

はじめに

ウェブデザインの世界では、ユーザーをコンテンツに集中させ、必要なツールへのアクセスを簡単にするために、様々なテクニックが用いられているかと思います。
今回紹介するスクロールに応じてヘッダーを自動表示する仕組みは、その中でも特に直感的な効果を感じていただける方法の一つですのでしっかり覚えておきたい項目ですね！

スクロールに応じたヘッダーの動き

この機能を実現するためのステップとして、

①JavaScriptでブラウザのスクロールイベントを検出

②スクロールの方向に応じてヘッダー要素の表示状態を切り替え

③下にスクロールするとヘッダーが隠れる

④上にスクロールするとヘッダーが現れて、ナビゲーションをすぐに利用できる

というような段階を踏んでブラウザは動作していきます。

実装の詳細

//ヘッダーを出し入れ
let lastScrollTop = 0;
window.addEventListener("scroll", function() {
  var currentScroll = window.scrollY || document.documentElement.scrollTop;
  if (currentScroll > lastScrollTop){
    // 下にスクロール
    document.getElementById("header").style.top = "-150px";
  } else {
    // 上にスクロール
    document.getElementById("header").style.top = "0px";
  }
  lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // ネガティブな値を避ける
}, false);

具体的には、`window`オブジェクトの`scroll`イベントリスナーを追加して、スクロールが発生するたびに現在のスクロール位置をチェックします。そして、前回のスクロール位置と比較して、スクロールの方向を判断します。

このスクリプトでは、`lastScrollTop`変数を使って前回のスクロール位置を保持し、現在のスクロール位置がこれより大きい場合は下にスクロールしているとみなし、ヘッダーを隠します。逆に、現在のスクロール位置が前回のものより小さい場合は上にスクロールしているとみなし、ヘッダーを表示します。

まとめ

このように、JavaScriptを使ったちょっとの工夫で、サイトのナビゲーションの使い勝手を大きく向上させることができます。

UXを考慮したウェブデザインは、訪問者がサイトに長く滞在しコンテンツを深く掘り下げるきっかけを作り出す重要な要素です。

このスクリプト以外にもたくさん方法はあるかと思うのでぜひいろんな方法で試作してみることをオススメします！

常に訪問者に快適なブラウジング体験を提供していきたいですね！

今後もたまに書くかもです！