Tweet

Pocket

JQueryでモーダルやメニューを表示したときに、後ろの画面がスクロールせずに固定されるようにする方法。

Javascript

$(document).ready(function(){
	var accBox = $('.menuContents'); // アコーディオン枠
	var menuButton = $('.menuTrigger'); // アコーディオンの開閉ボタン

	accBox.css('display','none');
	secondMenu.css('display','none');

	var currentScrollY;

	menuButton.on('click', function() {

		if(!accBox.hasClass('active')){ // ボックスを開く動作
			current_scrollY = $(window).scrollTop();
			accBox.slideDown();
			accBox.addClass('active');
			menuButton.addClass('active');
			$('body').css({"position":"fixed","width":"100%","top": -currentScrollY});
			return false;
		}

		if(accBox.hasClass('active')){ // ボックスを閉じる動作
			accBox.slideUp();
			accBox.removeClass('active');
			menuButton.removeClass('active');
			$('body').css({"position":"static","width":"auto","top":"auto"});
			$("html,body").scrollTop(currentScrollY);
			return false;
		}
	});
});

上記はアコーディオンの場合です。
「display:block」で開閉の判定をしたところアコーディオンが正常に動作しなかったので、アコーディオン開時にアコーディオン要素に「active」クラスを付与し、閉時には「active」クラスを削除するようにして、hasClassで「active」クラスがあるかどうかを判定して開閉動作を振り分けています。
背景の固定は「current_scrollY = $(window).scrollTop();」でアコーディオンが開いた段階でのスクロール位置を取得し、bodyをfixedにしてtopの値に取得したスクロール位置のマイナスの値を入れてスクロールされている状態の位置で背景を固定しています。
アコーディオンを閉じたら開時にbodyにかけたスタイルをリセットして「$(“html,body”).scrollTop(currentScrollY);」でスクロールをアコーディオンを開いたときの位置にしています。