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

cssのposition:stickyを使えず、jQueryで似たような挙動を実装したときの備忘録

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

まず、position:stickyは親要素でoverflow:hiddenを使用している正常に動かない。
なので、親要素からoverflow:hiddenを外せばposition:stickyは動く。

以下は、どうしても親要素からoverflow:hiddenを外せない時にjQueryを使って実装する方法。

「position:sticky」をjQueryで再現してみた

以下、サンプル。

See the Pen
【jQuery】「position:sticky」が効かない理由、jqueryを使って再現してみた by twotone (@twotone-me)
on CodePen.

以下は必要最低限必要なコード。

<style>
	.sticky-area{
		position: relative;
	}
</style>

<div class="sticky-area">
	<div class="sticky"></div>
</div>

<script>
jQuery(function($){
	const windowHeight = $(window).height();// ウィンドウサイズを取得
	const sticky = $('.sticky');// stickyさせたい要素
	const targetArea = $('.sticky-area');// この要素内でstickyさせる
	const stickySize = sticky.innerHeight();// stickyさせる要素の高さを取得
	const stickyMargin = sticky.position().top;// 親要素の中の要素の座標を取得
	const targetAreaStart = targetArea.offset().top;// stickyさせる範囲の開始の座標を取得
	const stickyPos = targetAreaStart + stickyMargin;// stickyさせる要素の座標を取得
	const targetAreaEnd = targetAreaStart + targetArea.innerHeight();// stickyさせる範囲の終わりの座標を取得
	$(document).scroll(function() {
		const currentPos = $(window).scrollTop();//現在位置の座標取得
		// ↓ 現在位置がstickyさせる要素を過ぎてる
		// ↓ かつ
		// ↓ 現在位置がstickyさせる要素の範囲内の座標のとき
		if(currentPos >= stickyPos && currentPos <= targetAreaEnd - stickySize ){
			console.log("In");
			sticky.css({
			    position:"fixed",
			    top:0,
			    bottom:"auto"
			});
		}else{
			console.log("Out");
			if(currentPos <= stickyPos ){// stickyさせる範囲の外(上部)の時
				sticky.css({
				    position:"absolute",
				    top:stickyMargin,
				    bottom:"auto"
				});
			}else{// stickyさせる範囲の外(下部)の時
				sticky.css({
				    position:"absolute",
				    top:"auto",
				    bottom:"0"
				});
			}
		}
	});
});
</script>

これでposition:stickyと同じような動作を実装することができた。

しかし、やってみて思ったが親要素のoverflow:hiddenを外してposition:stickyが正常に動くようにした方が早い。