jQuery PR

スクロールで途中から表示されてフッター前で消える要素を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」を削除することで表示・非表示を切り替える仕様にしています。

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

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。