1

Opa galera, primeiramente irei explicar o que farei.

Quero que ao usar scroll e passar pelo meu menu, ele fique fixo no topo. O meu site vai ter o menu neste estilo SITE EXEMPLO, uma parte inicial que no meu caso ocupa 100% da tela (está com a altura definida em 100% no css), e só depois vem o menu.

Então, para eu fazer com que isso seja possível, peguei o exemplo de uma outra pergunta e coloquei isto no meu código.

jQuery("document").ready(function($){

var nav = $('.nav-container');

$(window).scroll(function () {
    if ($(this).scrollTop() > 750) {
        nav.addClass("f-nav");
    } else {
        nav.removeClass("f-nav");
    }
});

No css coloquei:

.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}

E no html, coloquei a classe "nav-container" na sessão que engloba todo meu menu, no caso a < nav >.

Porém, acontece os seguintes erros:

Como a altura para fixar o menu está definido em pixels no caso o 750 que consta no código JS, e minha tela inicial está definida em % (100%) quando eu aumento a tela ou coloco para expandir o navegador, a posição que o menu fixa muda de lugar, não fica exatamente quando passa por ele .

E um outro erro está acontecendo, quando o menu fixa, tudo que está abaixo dele se move uns 30 pixels pra cima, é como se o menu quando fica fixo liberasse espaço para o conteúdo subir, e isso tá ficando feio.

Alguém sabe como faço para corrigir esses erros?

1
  • coloca position: absolute no menu, e no container, ai no container da margin-top: 30px; acho q somente isso ja resolve, se n resolver, coloca o codigo executavel pra nos ver-mos Commented 10/11/2017 às 0:07

1 Resposta 1

0

Uma solução para isso é fazer um controle de margin-top da div abaixo do menu. O código abaixo faz isso. Ele fixa o menu quando a div anterior sai da tela e adiciona uma margem superior da mesma altura do menu à div abaixo do menu, e faz o processo contrário também, quando a div antes do menu volta à tela com o scroll:

$(window).on('scroll load', function(){
   var win_scl = $(window).scrollTop(); // valor do scroll da janela
   var nav = $('.nav-container'); // menu
   var nav_ant = nav.prev('div'); // div antes do menu
   var nav_hgt = nav.outerHeight(); // altura do menu
   var nav_ant_hgt = nav_ant.outerHeight(); // altura da div antes do menu
   var nav_ant_top = nav_ant.offset().top; // distância da div antes do menu ao topo
   var nav_ant_dst = nav_ant_top-win_scl; // distancia do final da div antes do menu ao topo da janela

   if(nav_ant_dst <= nav_ant_hgt && win_scl > nav_ant_hgt) {
      nav.addClass("f-nav");
       // adiciono margem superior à primeira div depois do menu
      $(".nav-container+section").css('margin-top',nav_hgt+'px');
   }else{
      nav.removeClass("f-nav");
       // retiro margem superior à primeira div depois do menu
      $(".nav-container+section").css('margin-top','0');
   }
});
html, body{ margin: 0; padding: 0; height: 100%; }
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}
.nav-container{
   display: block; width: 100%; height: 50px; background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: block; width: 100%; height: 100%; background: black; color: white;">
   Role para baixo
</div>
<div class="nav-container">
   menu
</div>
<section style="display: block; width: 100%; background: gray; position: relative;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla ornare vehicula. Quisque sit amet placerat mauris. Cras sed risus luctus, gravida tortor id, tristique felis. Nam nisl nisl, semper viverra augue a, tempus feugiat tellus. Quisque in justo volutpat felis finibus euismod. Quisque ullamcorper vel ipsum vel porta. In tortor lacus, sagittis et erat et, semper venenatis odio. Sed feugiat mollis ornare. Sed iaculis eros lacus, nec efficitur elit suscipit at. Vivamus ullamcorper volutpat gravida. Vestibulum accumsan vehicula felis, vel gravida mauris consectetur quis.
</section>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />

10
  • Olha, definitivamente muito obrigado! Quando aumento o tamanho da tela, resolução de tela, etc... o menu só fixa quando chega no top 0, isto eu consegui e funcionou, obrigado. Porém, nao consegui fazer com que adicione a margin top, para o conteúdo de baixo nao se mover um pouco mais para cima. *PS: Preciso fazer um curso de js urgente
    – user96296
    Commented 10/11/2017 às 1:35
  • O conteúdo abaixo é uma section, e dentro dessa section tem uma primeira div onde comecei a colocar os itens, mas o pai geral é a section mesmo. O menu eu fiz com NAV, e abaixo do menu é essa section. Por exemplo: No que vc mandou, vc colocou a class nav-container numa div, no meu eu coloquei na NAV, e funcionou.. só falta o de baixo nao se mover kk
    – user96296
    Commented 10/11/2017 às 1:43
  • @LukasMonteiro Então troque o +div no código por +section nas 2 linhas que tem +div.
    – Sam
    Commented 10/11/2017 às 1:44
  • mesmo tendo outras sections abaixo desta primeira section? nao iria atrapalhar nada pra baixo?
    – user96296
    Commented 10/11/2017 às 1:45
  • @LukasMonteiro Não, ele só pega a primeira.
    – Sam
    Commented 10/11/2017 às 1:45

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