position:stickyを使えない環境で似たような事をしたかったときの備忘録

前回、親要素にoverflow:hiddenをかけざるおえない案件でjqueryで実装した続き
今回は複数の要素バージョン

jqueryでstickyのパララックスを再現する方法

<style>
	.sticky-area{
		position: relative;
		height: 100vh;
	}
	.sticky{
		height:100%;
		width:100%;
		text-align:center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.sticky span{
		color:#fff;
		font-size:20px;
		line-height:100vh;
	}
</style>

<div class="sticky-area">
	<div class="sticky" style="background: red;"><span>スクロールに合わせてついてくる01</span></div>
</div>
<div class="sticky-area">
	<div class="sticky" style="background: blue;"><span>スクロールに合わせてついてくる02</span></div>
</div>
<div class="sticky-area">
	<div class="sticky" style="background: green;"><span>スクロールに合わせてついてくる03</span></div>
</div>
<div class="sticky-area">
	<div class="sticky" style="background: pink;"><span>スクロールに合わせてついてくる04</span></div>
</div>

<script>
jQuery(function($){
	$('.sticky').first().css("z-index", "2");// 最初の要素を前面に出すための記述
	const windowHeight = $(window).height();// ウィンドウサイズを取得
	$(document).scroll(function() {
	    $(".sticky-area").each(function(){
			const targetArea = $(this);// この要素内でstickyさせる
			const sticky = $(this).children('.sticky');// stickyさせたい要素
			const stickyMargin = sticky.position().top;// 親要素の中の要素の座標を取得
			const targetAreaStart = targetArea.offset().top;// stickyさせる範囲の開始の座標を取得
			const targetRange = targetAreaStart + targetArea.innerHeight();// stickyさせる範囲の終わりの座標を取得
			const currentPos = $(window).scrollTop();//現在位置の座標取得
			if(currentPos >= targetAreaStart && currentPos <= targetRange ){// 画面内の処理
				console.log($(this).find('span').text()+"In");
				sticky.css({
				    position:"fixed",
					"z-index": "1"
				});
			}else{// 画面外の処理
				sticky.css({
				    position:"absolute",
					"z-index": "2"
				});
			}
		});
	});
});
</script>

やってることはシンプルで範囲内（.sticky-area）に入ったら.stickyにabsoluteかけて範囲と一緒にスクロールして、スクロールが終わったらfixedかけて画面に固定させてるだけ

以前やったパララックスの備忘録を参考にしてる