0

Cirei um menu que percebe quando o scroll passa de um determinado ponto e fica fixo, até ai tudo certo, porém quando rolei a página um pouco mais para baixo, e atualizei (F5) reparei que o menu sumiu, e depois ao rolar uma vez o scroll para cima/baixo ele reaparece.

Alguém sabe o que eu poderia fazer para isso não ocorrer, aparecer o menu tbm ao dar um refresh/f5?

Segue código abaixo.

$(document).ready(function(){
  var div = $('#menu');
  $(window).scroll(function () {
      if ($(this).scrollTop() > 35) {
          div.addClass("menu-fixo");
      } else {
          div.removeClass("menu-fixo");
      }
  });
});
#menu {
  min-height: 112px;
  background-color: tomato;
}
.menu-fixo {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="menusite" class="container-fluid">
  <div class="row">
    <div class="col-md-12"> Menu </div>
  </div>
<div>

2
  • Tem alguma URL para verificarmos este comportamento? Imagino que o script esteja sendo carregado ou disparado depois que o scroll acontece, mas queria ter certeza antes de dar uma resposta Commented 27/10/2017 às 14:24
  • @CelsoBessa não tenho amigo, esta rodando local. O script é só isso ai mesmo. Commented 27/10/2017 às 14:29

1 Resposta 1

2

Você pode armazenar seu scroll em sessionStorage e fazer validações a partir dai, segue um exemplo de como funcionaria.

if(sessionStorage.scroll){
  $('.menu').show()
}

$(document).ready(function(){
  var div = $('.menu');
  $(window).scroll(function () {
      if ($(this).scrollTop() > 35) {
          sessionStorage.scroll = true
          div.show()
      } else {
          div.hide();
      }
  });
});
.menu{
  position: fixed;
  width: 100%;
  height: 50px;
  background: red;
  display: none;
}


.content{
  height: 2000px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="menu"></div>
  <div class="content">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    dasd
  </div>
</body>
</html>

Lembrando que isso é um exemplo simples, da para você fazer de n formas usando sessionStorage, basta melhorar para a sua necessidade.

1
  • Ajudou, obrigado. Commented 27/10/2017 às 16:11

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 .