【jQuery】スクロールしたら要素を固定する方法

目次

↑スクロールするにつれて、右側のカテゴリーだけがうまく固定されているのが分かりますね!

今回は、上の画像のように、画面をスクロールしたら特定の要素を固定する方法について解説していきます。

サンプルコード

とはいっても簡単で、基本的には下のコードをそのまま貼り付ければOKです。

最初のvarの部分は変数の定義部分になっていて、#categoryの部分は固定したい要素に対応しているので、自由に指定してください。(scroll > 100)の部分は画面を何pxスクロールしたら要素を固定するかにあたるので、ここの数値も状況に合わせて自由に調整してください。

var $content = $("#category"),
	fixedClass = "ca-fixed";

$(window).on("load scroll", function() {
	var scroll = $(this).scrollTop();
	if ( scroll > 100 ) { //100px以上スクロールしたら
		$content.addClass(fixedClass); //クラスを付与
	} else {
		$content.removeClass(fixedClass);
	}
});

↓あとは、要素を固定するためのクラス(ca-fixed)にposition: fixed;を指定します。スクロールしていって自然な感じに固定したいならtopだけを指定し、左右の位置をずらしたいならleftやrightも指定するといいでしょう。また、クラス名はca-fixedに限らず、自由に指定しても構いません。

.ca-fixed {
	position: fixed;
	top: 30px;
}

スクロール量とtop: 〇〇px;の考え方

スクロールしたときに滑らかに固定されるようにするには、スクロール量(scroll > 〇〇)とtopの値をしっかり計算する必要があります。考え方としては、(スクロール量)+(topの値)=(ページの一番上からの要素の距離)になればOKです。例えば、要素が上から150pxの位置にあるなら、(scroll > 120)でtop: 30px;とすると、要素が滑らかに固定されるはずです。

ページの一番上からの距離を調べる

要素がページの上端からどれくらいの距離にあるかを調べるには、デベロッパーツールを使えばOKです(デベロッパーツールの使い方はこちら)。具体的には、デベロッパーツールを起動し、ページの一番上を表示した状態で、Console欄に下のコードを打ち込んでください。

$("自由に指定").offset().top;

↓Enterを押すと、上端からの距離を教えてくれました!(単位はpxです)