Full screen overlay with menu

Question

Talk guys, all right?

I’m having a hard time making the effect of Full Screen Overlay, in this effect I use CSS and Jquery. The effect consists of opening a div overlay, when I click the menu button the div overlay hides the scroll bar of the browser (scroll), the problem is that when I open the div overlay the page does not remain in the same place, and is returning to the top of the page, I would like the page to stay in the same place when opening the menu. I am putting the example below, so that you can see the extreme effect I kindly ask you to open the example in 'Whole page' so you’ll see the scroll come out when the overlay appears. From now on I thank you guys!

$(".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>

Answer 1

You’re trying to hide the scroll of the page applying position: fixed page elements. I believe this is not the best alternative, because when returning the elements to the normal, the page will always stay at the top because you kind of reset the content of body.

The best alternative is to delete the position: fixed CSS and add a class to the CSS that will hide the scroll page:

.overlay-abre{
   overflow: hidden;
}

When the body receive this class, the scroll will hide normally without affecting the content.

Behold:

$(".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{
   overflow: hidden;
}

.overlay-abre .bloco1{
  width:100%;
  height:100%;
  top:0;
  right:0;
  bottom:0;
  left:0;
  visibility:hidden;
}
.overlay-abre .container{
  width:100%;
  height:100%;
  top:0;right:0;
  bottom:0;
  left:0;
  opacity:0;
  visibility:hidden;
}

<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>