Fala galera, tudo bem?
Estou com uma dificuldades para fazer o efeito de Full Screen Overlay, nesse efeito utilizo o CSS e Jquery. O efeito consiste na abertura de uma div overlay, quando eu clico no botão menu a div overlay esconde a barra de rolagem do navegador (scroll), o problema é que quando eu abro a div overlay a página não permanece no mesmo lugar, e está voltando ao topo da página, eu gostaria que a página permanecesse no mesmo lugar quando abrisse o menu. Estou colocando o exemplo abaixo, para que vcs consigam ver extamente o efeito peço por gentileza que abram o exemplo na 'Página toda' assim vcs vão ver o scroll sair quando o overlay aparecer. Desde já agradeço galera!
$(".botao-menu").click(function() {
$('.transform').toggleClass('overlay-active');
});
$(".botao-menu").click(function() {
$("body").toggleClass("overlay-abre")
});
/*Reset*/
*{
padding:0px;
margin:0px;
}
/*Formatação de fonte*/
h1, h2, h3{
font-family:arial;
font-size:50px;
color:#fff;
text-align:center;
line-height:300px;
}
/*Aqui vai o CSS básico*/
.botao-menu{
width:50px;
height:50px;
background:#666;
display:block;
cursor:pointer;
position:fixed;
top:20px;
left:20px;
z-index:9999;
}
.bloco-1{
width:100%;
height:100vh;
background:#ff0066;
display:block;
float:left;
}
.bloco-2{
width:100%;
height:100vh;
background:#ff0;
display:block;
float:left;
}
.bloco-3{
width:100%;
height:100vh;
background:#f00;
display:block;
float:left;
}
/*Aqui começa o CSS do overlay*/
.overlay{
width:0px;
height:0px;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
opacity:0;
visibility:hidden;
transition:all .9s ease;
z-index:9998;
}
/*Aqui é o CSS para ativar o overlay*/
.overlay-active{
/*A class overlay-active faz com que o overlay apareça*/
width:100%;
height:100%;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background:#000;
}
.transform {
/*A class transform da o efeito de transição para o overlay*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
/*As class abaixo faz o overlay aparecer e o restante do conteúdo desapareça assim o scroll se esconde*/
.overlay-abre .overlay{
opacity:1;visibility:visible;
}
.overlay-abre .bloco1{
width:100%;
height:100%;
top:0;
right:0;
bottom:0;
left:0;
position:fixed;
visibility:hidden;
}
.overlay-abre .container{
width:100%;
height:100%;
top:0;right:0;
bottom:0;
left:0;
opacity:0;
visibility:hidden;
position:fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="bloco-1">
<h1>1</h1>
<div class="botao-menu"></div>
<div class="overlay transform">Aqui dentro vai o meu menu!</div>
</div>
<div class="container">
<div class="bloco-2">
<h2>2</h2>
</div>
<div class="bloco-3">
<h3>3</h3>
</div>
</div>