スマホでハンバーガーメニューを開いてスクロールする際に、背景を固定してスクロールできないようにする方法を紹介します。
ハンバーガーメニューをクリックしてメニューが開いている時はbodyタグに「fixed」というクラスを付けて、メニューが閉じている時はクラスを外すようにし、クラスがついている時は「position:fixed;」で固定するようにします。
クラスがついている時のCSSは以下の通り。
CSS
body.fixed {
width: 100%;
height: 100%;
position: fixed;
}
body.fixed {
width: 100%;
height: 100%;
position: fixed;
}
jQueryは以下の通りです。
JS
$(function(){
var state = false;
var pos;
$(‘.hamburger’).click(function(){
if (state == false) {
pos = $(window).scrollTop();
$(‘body’).addClass(‘fixed’).css({‘top’: -pos});
state = true;
} else {
$(‘body’).removeClass(‘fixed’).css({‘top’: 0});
window.scrollTo(0, pos);
state = false;
}
});
});
$(function(){
var state = false;
var pos;
$(‘.hamburger’).click(function(){
if (state == false) {
pos = $(window).scrollTop();
$(‘body’).addClass(‘fixed’).css({‘top’: -pos});
state = true;
} else {
$(‘body’).removeClass(‘fixed’).css({‘top’: 0});
window.scrollTo(0, pos);
state = false;
}
});
});
クラスの付け外しだけだと、メニューを展開するたびにページの一番上まで戻ってしまうので、topで位置が変わらないように制御しています。
JavaScriptが学べるおすすめのスクール
jQueryは比較的覚えやすいと思うので、独学でも十分学べますが、JavaScriptの基本的なことから学びたいという人やjQueryの学習に行き詰まっている人は、プログラミングスクールで学ぶのもありです。
TechAcademy
- オンラインプログラミングスクール受講数No.1
- 講師・メンターが現役エンジニア
- 転職サポートがある
他のスクールとも比較して決めたい方は、JavaScriptと併せて何を学べるかという点に注意して、どのスクールを選ぶか決めるといいと思います。
JavaScriptが学べるプログラミングスクールとその選び方は以下の記事で解説しています。
Leave a Comment