【jQuery】「position:sticky」をjqueryを使って再現してみたPart2

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

「position:sticky」は親要素に「overflow:hidden」があると使えない

前回書いた通り、position:stickyは親要素でoverflow:hiddenを使用している正常に動かない。
なので、親要素からoverflow:hiddenを外せばposition:stickyは動く。

以下は、どうしても親要素からoverflow:hiddenを外せない時にjQueryを使って実装する方法の複数の要素をパララックスのように動作させる方法。

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

以下、jQueryを使ってcssの「position:sticky」のパララックスを再現したデモ。

See the Pen
【jQuery】「position:sticky」をjqueryを使って再現してみたPart2 by twotone (@twotone-me)
on CodePen.

以下、ソースコード全体。

<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かけて画面に固定させてるだけ

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

また、cssの「position:sticky」を使うとパララックス作れる。（CSS凄い）