スクロールが特定のエリアに入ったかどうかを検知するjQuery

2019年12月4日2021年11月27日

スクロール時に特定のエリアに入ったかどうかを検知するためのjQueryの書き方です。

背景色とのコントラスト比で色を追従するアイテムの色を変更したい場合や、特定のエリアのみ表示するようなアイテムを作る際に使われたりします。

型だけ覚えておけば使い回せて便利なので、ぜひお試しください！

はにわまん

スクロールや要素の値の取り方が整理できていれば簡単です。

スクロールが特定のエリアに入ったかどうかを検知するjQuery

以下のような、スクロールがセクション3に入った時にヘッダーの色が赤に変わる例を作ってみました。

HTMLとしては、以下のようなものを用意しました。
対象となるエリアに対して.target-areaを指定してあげます。

<div class="section section1">
	<div class="section-content">セクション1</div><!-- /section-content -->
</div><!-- /section -->
<div class="section section2">
	<div class="section-content">セクション2</div><!-- /section-content -->
</div><!-- /section -->
<div class="section section3 target-area">
	<div class="section-content">セクション3</div><!-- /section-content -->
</div><!-- /section -->
<div class="section section4">
	<div class="section-content">セクション4</div><!-- /section-content -->
</div><!-- /section -->
<div class="section section5">
	<div class="section-content">セクション5</div><!-- /section-content -->
</div><!-- /section -->

CSSでは、各セクションに対して適当な色と高さを指定してあげています。

.section {
	height: 600px;
	background: #ccc;
	position: relative;
	transition: all 0.3s ease 0s;
}
.section1 {
	background: #FFFDE7;
}
.section2 {
	background: #E1F5FE;
}
.section3 {
	background: #BBDEFB;
}
.section4 {
	background: #C8E6C9;
}
.section5 {
	background: #FFECB3;
}

そして、jQueryでスクロールイベントを取得して判定を行っています。

jQuery(window).scroll(function() {
	let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置
	let areaTop = jQuery(".target-area").offset().top; // 対象エリアの上部の位置
	let areaBottom = areaTop + jQuery(".target-area").innerHeight(); // 対象エリアの下部の位置

	if (scrollTop > areaTop && scrollTop < areaBottom) {
		jQuery("body").addClass("is-in"); // スクロールが対象エリアに入った場合
	} else {
		jQuery("body").removeClass("is-in"); // スクロールが対象エリアから出ている場合
	}
});

取得する値としては以下の3つです。

スクロール上部の位置を取得
対象エリアの上部の位置
対象エリアの下部の位置

そして、スクロール上部が対象エリアの上部の位置を超えた時と、スクロール上部が対象エリアの下部の位置を超えた時の2つの判定を行うような感じです。

今回の場合だと、スクロールが対象エリアに入った場合は、bodyに対して.is-inというクラスを付与して、対象エリア外の時はbodyから.is-inクラスを削除しています。

bodyにつけることでサイト全体への効果を与えることが可能です。汎用的に使いたいクラスなどはbodyにつけると管理しやすくなっておすすめです。
https://haniwaman.com/body-data/

特定のエリアに入った時にアイテムを表示する例

もう一つよくある例として、特定のエリアに入った時にアイテムを表示する例を見ていきます。

特定のエリアに入った時にアイテムを表示する例です。セクション3に入ったら右側から「特定のエリアで出てくる」が伸びてくるように作っています。

方法としては最初に紹介したものとベースは同じです。特定のエリアに入った時を監視して、bodyにクラスを付与。そして今回でいうと「特定のエリアで出てくる」というラベルに対して、処理を加えてあげるようなイメージです。

表示する用のHTMLとCSSを以下のように作成して、.is-inクラスが付与されたら、translateX(0)として隠してあったアイテムを表示するようにしています。

<div class="floating"><a href="#">特定のエリアで出てくる</a></div>

.floating {
	position: fixed;
	transform: translateX(100%);
	transition: all 0.3s ease 0s;
	top: 120px;
	right: 0;
}

.is-in .floating {
	transform: translateX(0);
}

※ jQueryについては先ほどと同様なので割愛します。