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で要素が空かどうか判別。任意のスタイルを適用する方法

2023.04.16
996
jQuery

jQueryを使ってJSONデータを取得、配列にして値を出力する方法【Ajaxで解決!】

更新日:2022.09.09
12711
HTMLCSS

@useを使って分割されたsassファイルを1つに集約して読み込む方法

2023.04.26
609
HTMLCSS

CSSで三角形の背景を作成。横幅100%でレスポンシブに可変させる方法

2023.01.16
2482