さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】ページスクロールして指定要素の位置でfixedを解除する

Pocket
LINEで送る

ページスクロールの途中で指定要素の位置に来たらfixedが解除されるJQueryです。

JQuery

$(document).ready(function(){
	var fixedElm = $('.fixedBox'); // fixedする要素
	var cancellationElm = $('.sectionBox'); // これの位置に来たらfixedが解除される要素

	var fixedHeight = fixedElm.height(); // fixedする要素の高さを取得
	var cancellationVal = cancellationElm.offset().top - $(window).height() + fixedHeight; // fixed解除するための基準となる値を取得
	$(window).on('scroll',function(){
		if ($(window).scrollTop() < cancellationVal) {
			fixedElm.css('position', 'fixed');
		} else {
			fixedElm.css('position', 'relative');
		}
	});
});

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容