スクロールしたらヘッダーが画面トップに固定されるサイトってよく見かけますよね。
ちょっと前に関わった案件で、クライアントから「スクロールしたらヘッダーをトップに固定させたい」という要望があったので、備忘録を兼ねて記事にしてみたいと思います。
jQueryを読み込む
今回紹介する方法はjQueryを使用しているので、headタグ内に以下のコードを追加して事前にjQueryを読み込みます。
1 | <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> |
jQueryは、自分でダウンロードしたjQueryファイルを読み込む方法と、CDN（Contents Delivery Network）から読み込む方法がありますが、CDNから読み込んだ方が簡単なので初心者にはそっちの方がオススメ。
過去記事でjQueryを読み込む方法を紹介しているので、jQueryを使ったことのない方は一度読んでみてください。
スクロールしたらナビゲーションを固定させる
とりあえずサンプル。
今回紹介する方法では、スクロールしてナビゲーションが画面トップに達したら、要素にCSSの position: fixed; を付加してナビゲーションを固定します。
スクロール量の計算やCSSの追加は jQueryを使っています。
CSSを記述
ナビゲーションを固定表示するためのCSSを記述します。
ナビゲーションが画面トップに達した場合に、ここで記述した内容をjQueryで要素に付加するので、デフォルト状態のCSSは別途記述が必要。
1 2 3 4 5 6 7 | .nav-fixed { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; } |
jQueryを記述
jQueryではスクロール量をチェックし、上記で記述した固定表示用のクラスの付加と削除を行っています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $(function(){ $('.global-nav').each(function () { var $window = $(window), $header = $(this), // ヘッダーのデフォルト位置を取得 headerOffsetTop = $header.offset().top; // ウィンドウのスクロールイベントを監視 $window.on('scroll', function () { // ウィンドウのスクロール量をチェックし、クラスを付加と削除を行う if ($window.scrollTop() > headerOffsetTop) { $header.addClass('nav-fixed'); } else { $header.removeClass('nav-fixed'); } }); // ウィンドウのスクロールイベントを発生させる // (ヘッダーの初期位置を調整するため) $window.trigger('scroll'); }); }); |
デフォルトで固定していないナビゲーションに、一定量スクロールしたら固定用のクラスを付加し、ヘッダーがデフォルトの位置に戻った時に固定用のクラスを削除しているのがポイント。
固定用のクラスを付加したままだと、ナビゲーションが画面トップに固定され続けてしまうので、必要のない時は固定用のクラスを削除しているんですね。
jQueryの最初に記述されている $(function(){ }; を jQuery(function($){ }); に変更します。
まとめ
CSSだけでは、スクロール量やスクロールの方向に合わせた状態の変化は出来なくても、jQueryでクラスの付加・削除をすれば、スクロールでナビゲーションを画面トップに固定させるような動きも簡単にできるんです。
どうしても初心者はjQueryを難しく考えて敬遠しがちだけど、jQueryを覚えるとめっちゃコーディングが楽しくなるので、WEBデザイン初心者の方々は是非jQueryにチャレンジしてください！
「スクロールでナビゲーションを画面トップに固定させる【jQuery使用】」でした。
