スクロールで途中から表示されてフッター前で消える要素をjQueryで作る方法

最初のファーストビューでは表示させずに、指定位置までスクロールしたら要素を表示、フッター近くまで行ったら非表示に切り替えるといった仕様が必要になったのでメモです。

スクロールで途中から表示、フッター前で消える要素をjQueryで作る

表示開始するところにID「start」、非表示にするところにID「end」とHTMLにつけます。
表示したり非表示にする要素は、「#fixed」。

let distance = 0;
let scrollStart = $('#start').offset().top;
let scrollEnd = $('#end').offset().top;
	$(document).scroll(function () {
		distance = $(this).scrollTop();
		$('.footer-btn_fixed').removeClass('js-on');
		if (scrollStart < distance && distance < scrollEnd) {
			$('#fixed').addClass('js-on');
		} else {
			$('#fixed').removeClass('js-on');
		}
	});

表示させたいときは、class「js-on」をつけて、表示させたくないときにはclass「js-on」を削除することで表示・非表示を切り替える仕様にしています。

ボタンを追従させるときに２重ボタンになるとややこしいのでこういう仕様が必要な場合がたまにありますね…