Eu to com um problema aqui, eu criei um menu que tem rolagem, porém quando tenho que rolar, preciso que a tela de fundo fique travada e apenas role na medida do menu... Aqui estão as fotos: [![Imagem do menu][1]][1] [![Menu com o que aparece][2]][2] [1]: https://i.sstatic.net/ZJAEH.png [2]: https://i.sstatic.net/4hAbY.png O código é o seguinte: **HTML** (A partir do div="content o código se mantém igual") <body> <div id="container"> <header> <nav> <a href="landpageMobile.html"> <img src="imagens/fiebIVazio.png" id="iconTop" alt=""> </a> <input type="checkbox" id="check"> <label id="icone" for="check"></label> <div id="menu"> <span></span> </div> <div class="barra"> <nav id="navMenu"> <a href="landpageMobile.html"><div class="link">Home</div></a> <a href="cursos480.html"><div class="link">Cursos</div></a> <a href="unidades480.html"><div class="link">Unidades</div></a> <a href="noticias480.html"><div class="link">Notícias</div></a> <a href="vestib480.html"><div class="link">Vestibulinho</div></a> <a href="test480.html"><div class="link">Teste Vocacional</div></a> <a href="contat480.html"><div class="link">Contato</div></a> <a href="cadastro480.html"><div class="link">Cadastrar</div></a> <a href="login480.html"><div class="link">Login</div></a> </nav> </div> </nav> </header> <div id="content"> <div class="wrapper"> <a href="#"> <div class="box"> <img src="imagens/astroMob.png" class="imageB" alt=""> <div class="cont"> <img src="imagens/fogueteF.png" class="icon" alt=""> <h5>Administração</h5> </div> </div> </a> </div> **CSS do Botão** (Eu fiz o código do botão em css) #check{ display:none; } #icone{ position: absolute; z-index: 5; margin-left: 63.2%; margin-top: 4%; } .barra{ width: 100%; position:absolute; text-align: center; z-index: 3; transition: all .2s linear; } #navMenu{ width: 100%; position:absolute; visibility: hidden; } #navMenu a{ text-decoration:none; } .link{ background-color:#494950; padding: 9.4%; font-family:"arial"; font-size: 18pt; transition: .2s ease-in-out; color:#f4f4f9; border-bottom: 2px solid #222; opacity:0; } .link:hover{ background-color:#050542; } #check:checked ~ .barra #navMenu a .link{ opacity:1; margin-top: 0%; visibility: visible; } label{ width: 46px; float: left; opacity:0; height: 44px; position: relative; float: left; position: absolute; box-shadow:5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; cursor: pointer; } label:hovert + #menu{ opacity: 1; } #menu{ width: 43px; float: left; opacity: 0.6; height: 43px; position: relative; background-color: #4c0c3f; box-shadow: 5px 2px 23px; transition: all 0.1s linear; border-radius: 50%; position: absolute; margin-left: 84%; z-index: 4; margin-top: 4%; } #check{ position: absolute; display:none; z-index: 4; } span{ width: 59%; height: 7%; top: 47%; left: 21%; position: absolute; background-color: #fff; transition: all 0.1 linear; } span:before{ content:''; top: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; } span:after{ content:''; bottom: 7px; position: absolute; background-color: #fff; transition: all 0.1s linear; width: 100%; height: 100%; } #check:checked + label + div > span{ background-color: transparent; } #check:checked + label + div > span:after{ transform: translate(0px, 6px) rotate(45deg); } #check:checked + label + div > span:before{ transform: translate(0px, -8px) rotate(-45deg); } #check:checked + label + div > .tent{ border-radius: 50%; } **Se precisar de algo é só falar** Ps: Ja tentei colocar isso mas não deu certo: body{ overflow: hidden; } #check:checked > body{ overflow: visible; }