1

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>

1
  • Só uma sugestão, por que não coloca o .overlay só com display: none; Ele está pegando as formatações atoa, ja que as outras classes ja recebem as mesmas. Commented 1/02/2018 às 19:11

1 Resposta 1

0

Você está querendo esconder o scroll da página aplicando position: fixed aos elementos da página. Creio que isso não seja a melhor alternativa, até porque ao voltar os elementos ao normal, a página sempre vai ficar no topo porque você meio que resetou o conteúdo do body.

A melhor alternativa é apagar os position: fixed do CSS e adicionar uma classe ao CSS que irá esconder o scroll da página:

.overlay-abre{
   overflow: hidden;
}

Quando o body receber essa classe, o scroll irá se esconder normalmente sem afetar o conteúdo.

Veja:

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

1
  • Valeu @dvd vou revisar o código obrigado!
    – Israel
    Commented 1/02/2018 às 20:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .