html、cssがすこし触れる程度でjavascriptは主にコピペで使用している初心者です。
スマホでハンバーガーメニューを作成した際、
メニューを全画面で開いた時に隠れているbody全体はスクロールしないようjQueryで設定していましたが、
メニューの中身がドロップダウンで開くようになるとbodyのスクロールが復活してしまいました。
メニュー内のドロップダウンが開いたときはメニュー内部のみスクロールさせ、
背景のbodyは依然としてスクロールさせないようにしたいです。
現在以下のようなコードになっています。
修正点ご指摘いただけますと幸いです。
▼HTML
<div class="sp-only">
<div class="cp_fullscreenmenu">
<input class="toggle" type="checkbox" />
<div class="hamburger"><span></span></div>
<!--ハンバーガーメニューを押したら開くメニューここから-->
<div class="menu">
<div>
<ul class="menu_ul">
<li class="drop click_down_1">
<a href="#">あいうえお</a><span class="plus"></span>
<div class="sub_list_1">
<ul class="menu_close">
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
</ul>
</div>
</li>
<li class="drop click_down_2">
<a href="brand/index.html">かきくけこ</a><span class="plus"></span>
<div class="sub_list_2">
<ul class="menu_close">
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
</ul>
</div>
</li>
<li class="drop click_down_3">
<a href="theme/index.html">さしすせそ</a><span class="plus"></span>
<div class="sub_list_3">
<ul class="menu_close">
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
<li><a href="#">テキスト</a></li>
</ul>
</div>
</li>
<li class="nodrop"><a href="about/index.html">たちつてと</a><span></span></li>
<li class="nodrop"><a href="sustainability/index.html">なにぬねの</a><span></span></li>
<li class="nodrop"><a href="https://www.rakuten.co.jp/" target="_blank">はひふへほ</a><span></span></li>
</ul>
</div>
</div>
<!--ハンバーガーメニューを押したら開くメニューここまで-->
<div class="logo"><a href="index.html"><img src="images/logo.svg" alt="ほげ"></a></div>
<div class="nav_icon">
<a href="javascript:void(0)" class="open-btn"><img src="images/search.svg" width="17px" alt="検索"></a>
<a href=""><img src="images/cart.svg" width="17px" alt="ほげ"></a>
</div>
</div>
</div>
▼CSS
/*menuコンテンツ*/
.cp_fullscreenmenu .menu {
position: fixed;
top: 0;
left: 0;
display: flex;
visibility: hidden;
overflow: hidden;
width: 100%;
height: 100%;
pointer-events: none;
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
align-items: center;
justify-content: center;
}
.cp_fullscreenmenu .menu > div {
display: flex;
overflow-y: scroll;
width: 100%;
height: 100%;
text-align: left;
color: #000000;
background: rgba(245, 240, 233, 1);
flex: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
justify-content: center;
padding-top: 20%;
}
.cp_fullscreenmenu .menu > div > ul {
display: block;
max-height: 100vh;
margin: 0;
padding: 0 1em;
list-style: none;
transition: opacity 0.4s ease;
opacity: 0;
}
.cp_fullscreenmenu .menu > div > ul > li {
font-size: 14px;
font-family: 'Josefin Sans',"游ゴシック";
display: block;
margin: 1em;
padding: 0;
border-bottom: 1px solid #E6E1D9;
padding-bottom: 14px;
width: 84vw;
}
.cp_fullscreenmenu .menu > div > ul > li > a {
position: relative;
display: inline;
cursor: pointer;
transition: color 0.4s ease;
}
.cp_fullscreenmenu .menu > div > ul > li > a:hover {
color: #e5e5e5;
}
.cp_fullscreenmenu .menu > div > ul > li > a:hover:after {
width: 100%;
}
▼JS
//メニュークリックでサブメニューを開く_あいうえお
$(function(){
$('.click_down_1').click(function () {
$('.sub_list_1').slideToggle(0);
});
});
//メニュークリックでサブメニューを開く_かきくけこ
$(function(){
$('.click_down_2').click(function () {
$('.sub_list_2').slideToggle(0);
});
});
//メニュークリックでサブメニューを開く_さしすせそ
$(function(){
$('.click_down_3').click(function () {
$('.sub_list_3').slideToggle(0);
});
});
//メニュークリックで+をーにする
$(function(){
$(function(){
$(".plus").on("click", function () {
$(this).toggleClass("minus");
});
});
});
//ハンバーガーメニュー開いた時にbodyを固定
var state = false;
var pos;
$(".cp_fullscreenmenu").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;
}
});
});