スマホ時にハンバーガーメニューなどでナビゲーションを表示させた際に、後ろのコンテンツが動かないようにするにはbody要素に「overflow: hidden;」をかけ、固定する必要があります。
ただ、そのままでは場合によってはPC時の時までbody要素が固定になってしまうため注意が必要です。
作例
felica29.starfree.jp
index.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>navgationの作成その1</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/hamburgers.css">
</head>
<body>
<header>
<h1>FELICA</h1>
<p>未経験からプロになる!</p>
<nav id="g-nav">
<ul>
<li><a href="#">BLOG<span>ブログ</span></a></li>
<li><a href="#">SERVICE<span>サービス</span></a></li>
<li><a href="#">RECRUIT<span>採用情報</span></a></li>
<li><a href="#">COMPANY<span>会社案内</span></a></li>
<li><a href="#">CONTACT<span>お問い合わせ</span></a></li>
<li><input type="text"><a href="#">検索</a></li>
</ul>
</nav>
<p class="hamburger hamburger--stand" id="btn">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</p>
</header>
<main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat quia a amet incidunt ipsam fugiat nostrum, magni iste dignissimos harum minima eaque voluptas debitis magnam! Beatae assumenda modi iure magni corrupti quo consequuntur accusamus aspernatur vitae delectus cumque quibusdam et ullam sunt, recusandae quisquam earum voluptate odio minus, sed possimus? Inventore aliquid rerum, magnam esse, animi consectetur laudantium cumque doloremque dolorum minus harum molestias quidem quam sunt dicta temporibus magni similique placeat omnis facere veritatis! Earum dolorum deserunt a. Sit aut quod ab distinctio itaque, voluptatem veritatis debitis tempore aliquam quo optio! Laudantium tenetur natus corporis, provident assumenda quaerat ea dolor dicta animi! Excepturi, quae. Sunt minus itaque iste quibusdam earum amet obcaecati voluptatum, nihil, rerum incidunt deserunt! Id, non.</p>
</main>
<footer></footer>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script>
$(function(){
$(window).on('load resize',function(){
$('#btn').removeClass('is-active');
$('body').removeClass('fixed');
if(window.matchMedia('(max-width:900px)').matches){
$('#g-nav').hide();
}else{
$('#g-nav').show();
}
});
$('#btn').on('click',function(){
$(this).toggleClass('is-active');
$('#g-nav').fadeToggle(200);
$('body').toggleClass('fixed');
});
});
</script>
</body>
</html>
style.css
@charset "utf-8";
html{box-sizing:border-box;text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{appearance:textfield}[type=search]::search-cancel-button,[type=search]::search-decoration{appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::focus-inner,[type=reset]::focus-inner,[type=submit]::focus-inner,button::focus-inner{border-style:0;padding:0}[type=button]::focus-inner,[type=reset]::focus-inner,[type=submit]::focus-inner,button:focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{appearance:none;appearance:none}select::expand{display:none}select::value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::file-upload-button{appearance:button;font:inherit}[type=search]{appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}img{max-width: 100%;}
header{
width: 100%;
height: 80px;
background-color: #333;
display: flex;
align-items: center;
color: #FFF;
padding: 0 40px;
}
h1{
margin-right: 20px;
}
header>p{
margin-right: auto;
}
#g-nav{
width: 60%;
}
#g-nav>ul{
display: flex;
}
#g-nav li{
width: 16.66%;
}
#g-nav a{
display: block;
height: 80px;
color: #FFF;
text-align: center;
padding-top: 26px;
font-weight: bold;
}
#g-nav span{
display: block;
font-size: 13px;
font-weight: normal;
}
#g-nav span::after{
display: block;
content: "";
width: 70%;
height: 4px;
margin: 0 auto;
background-color: #FFF;
transform: scale(0);
transition: 0.2s;
}
#g-nav a:hover>span::after{
transform: scale(1);
}
#g-nav li:last-of-type>a{
background: url(../img/icon.svg)no-repeat center center/30px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
#g-nav a:hover>span{
}
input,#btn{
display: none;
}
main>p{
width: 50%;
margin: 200px auto;
line-height: 3;
font-size: 20px;
}
footer{
height: 100px;
background-color: #344d6d;
}
@media (max-width:900px){
header{
height: 60px;
position: fixed;
top: 0;
left: 0;
padding: 0 10px;
}
#g-nav{
width: 100%;
height: calc(100vh - 60px);
background-color: rgba(52, 77, 109, 0.8);
position: fixed;
top: 60px;
left: 0;
padding:20px 40px;
}
#g-nav>ul{
display: block;
}
#g-nav li{
width: 100%;
}
#g-nav a{
height: 60px;
border-bottom: 1px solid #FFF;
}
#g-nav span{
display: inline;
margin-left: 10px;
}
#g-nav li:last-of-type{
display: flex;
padding-top: 20px;
}
#g-nav li:last-of-type>a{
width: 40px;
height: 40px;
background-color: #333;
border-bottom: 0;
}
#g-nav li:last-of-type>input{
background-color: #FFF;
width: calc(100% - 40px);
height: 40px;
display: block;
color: #222;
padding: 2px 4px;
}
#btn{
display: block;
}
body.fixed{
overflow: hidden;
}
}
