Written by Kasumi

【簡単CSS・jQuery】上スクロール時のみヘッダー・ナビを固定表示する方法

上スクロール時のみ、ヘッダーもしくはグロナビを上部に固定表示したい。

本記事ではCSS・jQueryを使ってこのような悩みを解決します。

※本記事ではjQueryを使うので、実装環境にライブラリを読み込みましょう。

実装サンプル

See the Pen
Untitled
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

上スクロール時のみヘッダー要素が上部に固定表示されてます。

実装手順は以下の通りです。

jQuery

//上スクロール 下スクロール 判定
var scroll = 0;
$(window).on('scroll', function(){
  if($(this).scrollTop() < scroll ){
    //上スクロール時、クラス付与
    $('header').addClass('fixed');
  }else{
    //下スクロール時、クラス削除
    $('header').removeClass('fixed');
  }
  scroll = $(this).scrollTop();
});

まず最初に上記jQueryコードを使って上スクロール・下スクロールを判定します。

scrollTopメソッドを使う事で現在のスクロール位置を取得。

スクロールを実行した時に取得した位置が、0より大きい場合下スクロール判定。

逆に0より小さい場合は上スクロール判定という処理をしています。

addClassメソッドを使って固定表示したい要素に上スクロール時はfixedクラスを付与。

removeClassメソッドを使って下スクロール時はfixedクラスを削除します。

CSS

/*固定時*/
header.fixed {
  position: sticky;
  top: 0;
  left: 0;
}

固定要素のcssセレクタにfixedクラスを結合。

上記セレクタにposition: sticky;プロパティを付与します。

position: sticky;を使う事で要素位置以外では固定表示してくれます。

以上の方法で上スクロール時のみヘッダーを固定表示させる事ができます。

グロナビを固定表示する場合も同じ容量で実装できます。

まとめ

position: fixed;でも固定表示できますが、要素位置まできたら固定を解除した方が見た目は美しいです。

ぜひ参考にしてみてください。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

【簡単】CSSを使って要素を非表示にせず、要素内のテキストだけ見た目上消す方法

2022.01.19
4270
HTMLCSS

【sass】@contentを使ってmediaクエリを簡略化する方法

2023.04.24
198
HTMLCSS

CSSで直前・後方の兄弟要素を指定する方法

2023.04.27
263
jQuery

bxsliderでスライダー内画像のaタグリンクが効かない時の対処方法【結論slickを使おう】

更新日:2022.11.25
2996