【簡単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;でも固定表示できますが、要素位置まできたら固定を解除した方が見た目は美しいです。
ぜひ参考にしてみてください。
以上で解説を終わります。
目次
