スクロールでナビゲーションを画面トップに固定させる【jQuery使用】

スクロールでナビゲーションを固定






スクロールしたらヘッダーが画面トップに固定されるサイトってよく見かけますよね。

ちょっと前に関わった案件で、クライアントから「スクロールしたらヘッダーをトップに固定させたい」という要望があったので、備忘録を兼ねて記事にしてみたいと思います。

jQueryを読み込む

今回紹介する方法はjQueryを使用しているので、headタグ内に以下のコードを追加して事前にjQueryを読み込みます。

jQueryは、自分でダウンロードしたjQueryファイルを読み込む方法と、CDN(Contents Delivery Network)から読み込む方法がありますが、CDNから読み込んだ方が簡単なので初心者にはそっちの方がオススメ。

過去記事でjQueryを読み込む方法を紹介しているので、jQueryを使ったことのない方は一度読んでみてください。

初心者でもコピペで実装!スクロールしたら要素をフワッと下から表示させる方法【jQuery】

2018.08.10

スクロールしたらナビゲーションを固定させる

とりあえずサンプル。

今回紹介する方法では、スクロールしてナビゲーションが画面トップに達したら、要素にCSSの position: fixed; を付加してナビゲーションを固定します。

スクロール量の計算やCSSの追加は jQueryを使っています。

CSSを記述

ナビゲーションを固定表示するためのCSSを記述します。
ナビゲーションが画面トップに達した場合に、ここで記述した内容をjQueryで要素に付加するので、デフォルト状態のCSSは別途記述が必要。

jQueryを記述

jQueryではスクロール量をチェックし、上記で記述した固定表示用のクラスの付加と削除を行っています。

デフォルトで固定していないナビゲーションに、一定量スクロールしたら固定用のクラスを付加し、ヘッダーがデフォルトの位置に戻った時に固定用のクラスを削除しているのがポイント。

固定用のクラスを付加したままだと、ナビゲーションが画面トップに固定され続けてしまうので、必要のない時は固定用のクラスを削除しているんですね。

WordPressでjQueryを使用する場合は、
jQueryの最初に記述されている $(function(){ };jQuery(function($){ }); に変更します。

WordPressでjQueryがうまく動かない時に確認するべき3つの事

2018.01.16






まとめ

CSSだけでは、スクロール量やスクロールの方向に合わせた状態の変化は出来なくても、jQueryでクラスの付加・削除をすれば、スクロールでナビゲーションを画面トップに固定させるような動きも簡単にできるんです。

どうしても初心者はjQueryを難しく考えて敬遠しがちだけど、jQueryを覚えるとめっちゃコーディングが楽しくなるので、WEBデザイン初心者の方々は是非jQueryにチャレンジしてください!

「スクロールでナビゲーションを画面トップに固定させる【jQuery使用】」でした。

初心者でもコピペで実装!スクロールしたら要素をフワッと下から表示させる方法【jQuery】

2018.08.10

コンテンツを無限スクロールさせるjQueryプラグイン「infiniteSlide.js」が便利

2019.02.24






スクロールでナビゲーションを固定