メニュー表示時に、背景を固定させたい

Question

ハンバーガーメニューを表示時に、背景を固定させてスクロールさせないように指定したいです。

ハンバーガーメニューはHTML,CSSだけで実装しています。
【ハンバーガーメニュー】

    <!-- ヘッダー -->
    <div class="header">
        <a href="/top/index.html" class="header-top">PON DESIGN</a>
        <!-- ハンバーガーメニュー -->
        <input id="menu" type="checkbox">
        <label for="menu" class="open menu-btn"><div class="line"></div><div class="line"></div><div class="line"></div></label>
        <label for="menu" class="back menu-btn"></label>

        <aside class="nav-menu">
            <label for="menu" class="close">×</label>
            <!-- メニュー(SP) -->
            <nav class="drawer-content">
            <ul class="drawer-list">
                <li class="drawer-item">
                <a class="link-item" href="/news/news.html">NEWS</a>
                </li>
                <li class="drawer-item">
                <a  class="link-item" href="/service/service.html">SERVICE</a>
                </li>
                <li class="drawer-item">
                <a class="link-item" href="/works/works.html">WORKS</a>
                </li>
                <li class="drawer-item">
                <a class="link-item" href="/company/company.html">COMPANY</a>
                </li>
                <li class="drawer-item">
                <a class="link-item" href="/recruit/recruit.html">RECRUIT</a>
                </li>
                <li class="drawer-item">
                <a class="link-item" href="/contact/contact.html">CONTACT</a>
                </li>
            </ul>
            </nav>
        </aside>
    </div>

ハンバーガーメニューの表示切替のトリガーになっている「open(三本線)」と「close(バツ印)」に「menu-btn」という共通のクラスを持たせて、以下のようにJQueryで記述しました。

$(function() {    
    　$('.menu-btn').click(function() {
            if($('body').hasClass('hidden')) {
                $('body').removeClass('hidden');
            } else {
                $('body').addClass('hidden');
            }
        });
    });

「menu-btn」をクリックすると、overflow: hidden;を指定してある「hidden」というクラスを、bodyに対して付け外しするようにしたのですが、上手く効いていないようです。

また、メニューを表示するとページのトップまで勝手に戻ってしまうのですが、どうすれば同じ場所でメニューを表示させることができるでしょうか？　色々と調べたのですが、よく分かりませんでした。分かる方がおられましたら、教えてくださると助かります。宜しくお願い致します。

Answer 1

こんにちは。

「hidden」というクラスを、bodyに対して付け外しするようにしたのですが、上手く効いていない

typo（打ち間違い）では。
('.menu-btn')→$('.menu-btn')
'.hidden'→'hidden'

Comments

[Goethe]

回答ありがとうございます。
タイポ直しました。

$(function() {
　$('.menu-btn').click(function() {
if($('body').hasClass('hidden')) {
$('body').removeClass('hidden');
} else {
$('body').addClass('hidden');
}
});
});

こちらに修正してみましたが、上手くいきませんでした。

[Lhankor_Mhy]

当方の環境では、問題なく「hidden」クラスをbodyに対して付け外しできています。
サンプルを提示します。
https://jsfiddle.net/Lhankor_Mhy/m9au5ghn/

Goetheさんの環境では上記のサンプルページでも、やはり「hidden」クラスをbodyに対して付け外しできていないですか？

[Goethe]

サンプルページでは、問題なく動作しております。
私の方のローカル環境では、やはりダメでした。他の機能は正常に動いているので、JSの読み込みに問題はありません。

[Lhankor_Mhy]

では、ご提示いただいていない部分に原因があると思われます。

問題が再現するコードをご提示ください。

[Goethe]

html, body {
overflow: hidden;
height: 100%;
}

とcssに記述すると思い通りの動きになるのですが、ハンバーガーメニューが勝手に固定状態（position: fixed;状態）になり、また他の要素がまるごと消えたりしてしまいます。

[Goethe]

【ヘッダー（ハンバーガーメニュー）に関するHTML全般】
<!-- ヘッダー -->
<div class="header">
<a href="/top/index.html" class="header-top">PON DESIGN</a>
<!-- ハンバーガーメニュー -->
<input id="menu" type="checkbox">
<label for="menu" class="open menu-btn"><div class="line"></div><div class="line"></div><div class="line"></div></label>
<label for="menu" class="back menu-btn"></label>

<aside class="nav-menu">
<label for="menu" class="close">×</label>
<!-- メニュー(SP) -->
<nav class="drawer-content">
<ul class="drawer-list">
<li class="drawer-item">
<a class="link-item" href="/news/news.html">NEWS</a>
</li>
<li class="drawer-item">
<a class="link-item" href="/service/service.html">SERVICE</a>
</li>
<li class="drawer-item">
<a class="link-item" href="/works/works.html">WORKS</a>
</li>
<li class="drawer-item">
<a class="link-item" href="/company/company.html">COMPANY</a>
</li>
<li class="drawer-item">
<a class="link-item" href="/recruit/recruit.html">RECRUIT</a>
</li>
<li class="drawer-item">
<a class="link-item" href="/contact/contact.html">CONTACT</a>
</li>
</ul>
</nav>
</aside>
<!-- メニュー(PC) -->
<header class="header-nav">
<nav>
<ul class="nav-list">
<li class="nav-item">
<a href="/news/news.html">NEWS</a>
</li>
<li class="nav-item">
<a href="/service/service.html">SERVICE</a>
</li>
<li class="nav-item">
<a href="/works/works.html">WORKS</a>
</li>
<li class="nav-item">
<a href="/company/company.html">COMPANY</a>
</li>
<li class="nav-item">
<a href="/recruit/recruit.html">RECRUIT</a>
</li>
<li class="nav-item">
<a href="/contact/contact.html">CONTACT</a>
</li>
</ul>
</nav>
</header>

【ヘッダー（ハンバーガーメニュー）に関するCSS全般】
.header-nav {
display: none;
}

.header {
background-image: url("/images/SP-TOP/[e-mail]");
background-size: cover;
height: 812px;
}

.drawer-list {
display: none;
}
.header .header-top {
color: white;
display: block;
width: 130px;
font-size: 18px;
font-weight: bold;
padding: 20px 0 0 15px;
text-decoration: none;
position: absolute;
}

.header .header-top:hover {
opacity: 0.8;
}

.header .header-active {
display: none;
}

.header .header-img-active {
display: none;
}

/* ハンバーガーメニュー */
.open, .close {
display: none;
}

/* 三本線 */
.line {
width: 30px;
height: 2px;
background-color: white;
margin: 6px;
}

/* 左に隠す */
input[type="checkbox"] {
position: absolute;
left: -50vw;
}

@media (max-width: 1150px) {
.open, .close {
display: block;
}

.close {/* ×のデザイン */
font-size: 40px;
color: white;
position: absolute;
right: 30px;
top: 10px;
}

.open {
position: absolute;
right: 30px;
top: 15px;
}
.drawer-list {
display: block;
}

/* コンテンツを隠す */
.nav-menu {
position: absolute;
right: -30%;
height: 812px;
transition: all 0.2s;
background: url(/images/SP-TOP/[e-mail]);
z-index: 1000;
width: 30%;
}

.link-item {
color: white;
text-decoration: none;
margin-top: 100px;
margin-bottom: -50px;
display: block;
text-align: center;
}

.link-news {
margin-top: 100px;
}

.link-item:hover {
text-decoration: underline;
}

input[type="checkbox"]:checked ~ .nav-menu {
right: 0;
}

input[type="checkbox"]:checked ~ .back {
position: absolute;
width: 100%;
height: 100%;
background: rgb(0, 0, 0, 0.8);
z-index: 100;
}

}

body.hidden{
overflow: hidden;
background: red;
}

【JSファイル全て】
$(function() {
$(window).scroll(function (){
$('.fadein').each(function(){
var targetElement = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > targetElement - windowHeight + 200){
$(this).css('opacity','1');
$(this).css('transform','translateY(0)');
}
});
});
$('.slider').slick({
autoplay: true,
dots: true,
});
});

$(function() {
　$('.menu-btn').click(function() {
if($('body').hasClass('hidden')) {
$('body').removeClass('hidden');
} else {
$('body').addClass('hidden');
}
});
});

$(document).ready(function() {
var pagetop = $('.pagetop');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500);
return false;
});
});

[Lhankor_Mhy]

問題を絞り込んでいただきたいのですが……
「hidden」クラスをbodyに対して付け外しできない、というのが問題なのではなかったでしょうか？
別の問題があるのであれば、この問題が解決した後に別の質問を立てて解決してください。

[Goethe]

提示できるコードは、以上が全てだと思います。宜しくお願い致します。

[Goethe]

「メニュー表示時に、背景を固定させたい」が目的で、そのために行った「hidden」クラスのつけ外しができなかった、ということです。分かりにくてすみません。

[Lhankor_Mhy]

「メニュー表示時に、背景を固定させたい」ということであれば、問題なく動作しているように見えます。（閉じた時の動作に問題がありますが）
もちろん、「hidden」クラスのつけ外しもできています。

どうも、問題の共有について上手くいっていないような気がしています。
もしかして、解決したいのは閉じた時の動作でしょうか？

[Goethe]

私の方では、hiddenクラスをつけたときに、背景色を赤にする(Lhankor_Mhyさんがしていた確認の仕方）ようにしていますが、背景色に変化がないため、つけ外し自体できていない状態です。

[Lhankor_Mhy]

えっ、そうなんですか？

とりあえず、いただいたコードで再度サンプルを作りました。
https://jsfiddle.net/Lhankor_Mhy/m9au5ghn/2/

Goetheさんの環境でこれも動作するならば、さらにご提示いただいていない部分に原因があるということになりますね……

[Lhankor_Mhy]

申し訳ないのですが、コードのご提示をいただく前に、抜き出したコードだけでGoetheさんの方で問題が再現することを確認してほしいのですが……

[Goethe]

ご提示させていただいたコードだけで検証してみましたが、やはり上手くいきませんでした。Lhankor_Mhyさんのサンプルコードでは、上手くいっています。

[Lhankor_Mhy]

うーん……

では、原因の絞り込みをしましょう。
hiddenクラスをつけることができない、というのはどのように確認していますか？
背景色の変化だけですか？
それとも、デベロッパーツールでも確認していますか？

[Goethe]

デベロッパーツールにも反応ない状態です。

[Lhankor_Mhy]

デベロッパーツールで見ても、class="hidden" となっていないのですね。
では、スクリプトに原因があると思われます。

$(function() {
console.log('ロードされた')
$('.menu-btn').click(function() {
console.log('クリックされた')
if($('body').hasClass('hidden')) {
$('body').removeClass('hidden');
console.log('hiddenを外した')
} else {
$('body').addClass('hidden');
console.log('hiddenをつけた')
}
});
});

としてみて、コンソールの出力を確認してみてください。
「hiddenをつけた」が出ますか？

[Goethe]

結果を下記にまとめます。

①提示させていただいたコードのみの環境（以下、テスト環境）のとき
script.js:13 Uncaught TypeError: $(...).slick is not a function
at HTMLDocument.<anonymous> (script.js:13)
at j (jquery.js:3099)
at Object.fireWith [as resolveWith] (jquery.js:3211)
at Function.ready (jquery.js:3417)
at HTMLDocument.I (jquery.js:3433)
(anonymous) @ script.js:13
j @ jquery.js:3099
fireWith @ jquery.js:3211
ready @ jquery.js:3417
I @ jquery.js:3433
index.html:1 Unchecked runtime.lastError: The message port closed before a response was received.

②テスト環境で他のJS記述を省いたとき
script.js:3 ロードされた
index.html:1 Unchecked runtime.lastError: The message port closed before a response was received.
script.js:5 クリックされた
script.js:11 hiddenをつけた

③ローカル環境で②のときと同じJSを記述したとき
DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:5501/top/slick.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
index.html:1 Unchecked runtime.lastError: The message port closed before a response was received.

④ローカル環境で該当のJS箇所だけ差し替えたとき
②と同じ結果

[Goethe]

最後の④は、②ではなく、③と同じ結果です。失礼しました。

[Goethe]

すいません！
ずっと他のディレクトリのJSファイルをみてました！　本当にお騒がせしました。。。申し訳ないです。無事解決しました。ありがとうございます。

[Lhankor_Mhy]

> 他のディレクトリのJSファイルをみてました！

あるあるですね！

ご解決されて何よりです。

[Goethe]

お騒がせしてすみません。。。

ただ閉じたときにクラスが外れないので、また問題に直面ですが笑
質問に付き合ってくださってありがとうございました。orz