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

【JQuery】モーダルやメニューを表示したときに、背景がスクロールしないようにする

Pocket
LINEで送る

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);」でスクロールをアコーディオンを開いたときの位置にしています。

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容