新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]
スクロールしたらヘッダーを固定したい場合のアイディア【jQuery&CSS】

ホームページを見ていると、画面をスクロールさせるたびに、ヘッダーのメニュー項目が最上部に固定されたまま付いてくるページもありますよね(^o^)?

今回は、そんな時に役立つ「スクロールしたらヘッダーを固定したい場合のアイディア」のご紹介です。

この記事の目次

【結論】スクロールしたらヘッダーを固定したい場合のアイディア

一定のスクロールをしたときにヘッダーを画面上部に固定したい場合のアイディアの一つとして、jQueryとCSSとで下記のような記述を追加してみてはいかがでしょうか。

jQuery:スクロール時に固定表示用のclass名を追加(上部に戻るとclass名は消える)

下記のjQueryのコードを、任意の箇所に追加してみてください。

外部のjsファイルに記述して読み込ませても結構ですし、HTMLファイル内に書くときはscriptタグに挟んで、固定表示させたい箇所の近くに書いておいても良いでしょう。

$(window).on('scroll', function() {
	$('header').toggleClass('fixed', $(this).scrollTop() > 10);
});

CSS:通常時とスクロール時の両方のスタイル定義をあらかじめ用意しておく

/* 通常時のスタイル定義
******************************/
header {/*通常時のheaderタグ*/}
header .child {/*通常時のheaderタグ内の子要素*/}

/* スクロールした場合のスタイル定義
******************************/
header.fixed {/*スクロール時のheaderタグ*/
	position: fixed;
	top: 0px;
}
header.fixed .child {/*スクロール時のheaderタグ内の子要素*/}

[.child]というのは「子要素のクラス」という意味でつけた仮の名前です。

必要に応じて付け加えてもOKです。

ページの先頭へ戻る

[概要]jQueryとCSSとで行われる処理のしくみ

上記のコードの「しくみ」について、大まかにご説明します。

まず、jQueryで「少しスクロールしたらclass名を追加する処理」を記述します。

上の例でいうならば、ブラウザの最上部を起点に「10px」だけ下にスクロールしたら[header]タグに[fixed]というclass名が追加されます。

その一方で、通常時とスクロール時それぞれのヘッダーのスタイル定義も用意しておいてください。

[header]のスタイル定義が「通常時」です。

[header.fixed]のスタイル定義が「スクロール時」です。

子要素のスタイル定義はご自由にどうぞ(^-^)

これらのjQuery&CSSの記述によって、

「ページが表示されたばかりの状態では、通常時のヘッダーが表示される」

「10pxほどスクロールしたら、スクロール時のヘッダー表示に切り替わる」

という処理が行われることになります。

ページの先頭へ戻る

[応用1]固定表示時にヘッダーを簡略化したい場合

この仕組みを応用して、スクロール時のヘッダーを簡略化することもできるようになるでしょう。

例えば、

「通常時のヘッダーは、これらの要素が必要」

「スクロール時のヘッダーは、通常時と比較して、これとこれが要らない」

という状況があったとして、要らない要素のclass名が[noNeed]のような名称だとしましょう。

その場合は、以下のようなスタイル定義で、通常時に表示・スクロール時に非表示という切り分けができるかと思います。

header .noNeed {/*表示・非表示に関する記述は無くて良い場合もアリ*/}
header.fixed .noNeed {display:none;}

ページの先頭へ戻る

[応用2]同じ原理でフッターにも何かつけられそう(^^)

この仕組みを応用すれば、別にヘッダーの固定表示で無くても良いわけです。

例えば、画面の最下部にソーシャルボタンを固定表示するため、フッター等の要素にも応用できるかと思います。

ソーシャルボタンのスタイルを定義している外側のタグのclass名を[social]だとすると、冒頭の[header]に対するスタイル定義を下記のように入れ替えることで、スクロール時に画面の最下部にソーシャルボタンを固定表示させることもできるでしょう。

/* 通常時のスタイル定義
******************************/
.social {/*通常時のスタイル定義*/}
.social .child {/*通常時の子要素のスタイル定義*/}

/* スクロールした場合のスタイル定義
******************************/
.social.fixed {/*スクロール時のスタイル定義*/
	position: fixed;
	top: 0px;
}
.social.fixed .child {/*スクロール時の子要素のスタイル定義*/}

ページの先頭へ戻る

この記事の感想をお寄せください

[スクロールしたらヘッダーを固定したい場合のアイディア【jQuery&CSS】]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

関連記事一覧:スクロールしたらヘッダーを固定したい場合のアイディア【jQuery&CSS】

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

皆さんは、ホームページのデザインを、どのページから始めるのが良いか、お考えになったことはありますか? もちろん、すべての場合に当てはまる正解などありません …… 続きを読む

ユーザーの方の操作に応じて、Webページ内の表示や動きを制御するホームページは、今ではよく見受けられます。 それらを実現している要素は「jQuery&CS …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.