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;でも固定表示できますが、要素位置まできたら固定を解除した方が見た目は美しいです。

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

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

目次

関連記事

jQuery

【簡単】jQueryを使って、入力中の値をリアルタイムでチェック・取得する方法

更新日:2022.09.09
1406
HTMLCSS

【CSS3】アニメショーンプロパティを使いこなそう!

更新日:2019.11.28
306
HTMLCSS

【CSS】aタグ内にaタグを入れる方法【簡単】

更新日:2019.11.28
349
HTMLCSS

画像をPCとスマホで切り替える方法【結論:picture要素を使おう】

2022.06.25
249