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

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

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

2018.1.30 2019.4.7

スクロールしたらヘッダーを固定したい場合のアイディア【jQuery&CSS】
Web制作 0 0
妙高Web屋LINE@ 友だち追加

ホームページを見ていると、画面をスクロールさせるたびに、ヘッダーのメニュー項目が最上部に固定されたまま付いてくるページもありますよね(^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 {/*スクロール時の子要素のスタイル定義*/}

ページの先頭へ戻る

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

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

コーディングのみの作業依頼も承ります!

妙高Web屋では、ホームページ制作過程の中でも特に「コーディング」「WordPressのテンプレート組み込み」と呼ばれる工程を得意としております。

「デザインまではできそうだけど、コーディングをやってくれる人がいない…。」

とお悩みの方のお力になります。

新潟県と長野県に事業所を置かれている方々には、ご相談次第で直接お会いしてお話をおうかがいすることも可能です。

お気軽にご相談ください。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ