グローバルナビやモーダル表示の時に背景を固定する
グローバルメニューやモーダルを表示したときに、背景を固定することが増えたのでメモ。
スマホでも背景が(多分)固定されます。
今のところは不具合なしのはず。
jQuery
jQuery
var btn = $('.btn');//動作に利用する要素
var flg;//メニューorモーダルが開いてるかの判定用フラグ
var scrollpos;//スクロール値
btn.on('click',function(){
if(flg !== true){//メニューorモーダルを開くときの動作
scrollpos = $(window).scrollTop();
$('body').addClass('fixed').css({ 'top': -scrollpos });
}else if(flg !== false ){//メニューorモーダルを閉じるときの動作
$('body').removeClass('fixed').css({ 'top': 0 });
window.scrollTo(0, scrollpos);
}
});
CSS
CSS(SCSS)
body.fixed {
position: fixed;
width: 100%;
overflow: hidden;
}