【JQuery】モーダルやメニューを表示したときに、背景がスクロールしないようにする
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);」でスクロールをアコーディオンを開いたときの位置にしています。
コメントを残す