Full screen overlay with menu

Question

Full screen overlay with menu

Navigation

#1 by (0 votes)

1

Talk to people, okay?

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, the problem is that when I open the div overlay the page does not stay in the same place, and it is returning to the top of the page, I would like the page to remain in the same place when I open the menu. I'm putting the example below, so that you can see exactly the effect please kindly open the example in 'Todo Página' so you'll see the scroll exit when the overlay appears. Thanks in advance!

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

html jquery css fullscreen

asked by anonymous 01.02.2018 / 19:56

1 answer

How to map an image to work responsive VS Code en pt-BR

score 0 · Accepted Answer

You're trying to hide the scroll from the page by applying position: fixed to page elements. I think this is not the best alternative, because when you return the elements to normal , the page will always stay on top because you kind of reset the content of body .

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

.overlay-abre{
   overflow: hidden;
}

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

See:

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