Como deixar o Menu Fixo ao Rolar página

Como deixar o Menu Fixo ao Rolar página

Veja como você pode fixar o menu no topo da página com JavaScript e css.

Adicionar um cabeçalho fixo pode ajudar a melhorar a experiência dos seus usuários e contribuir imensamente para o visual e a usabilidade do seu site ou blog.

Esse recurso que é muito utilizado em sites e blogs, esse recurso permite deixar o menu sempre disponível para o usuário, para que não seja preciso rolar toda a página de volta ao topo para poder navegar pelo site ou blog.

Esse recurso é fácil de fazer com apenas algumas linhas de códigos pode-se conseguir esse efeito apenas com CSS, mas demonstrarei como fazer apenas com CSS e também com auxílio de JavaScript.

Vamos Adicionar o Html

no header vamos adicionar uma CLASS chamada (main_header)

OBS: você pode adicionar a class ( main_header ) nos elementos: nav, div ou header.

<header class="main_header">        

</header>

Vamos Adicionar o Script

$(function () {


    //HEADER
    $(window).scroll(function () {
          if($(this).scrollTop() > 200)
          {
              if (!$('.main_header').hasClass('fixed'))
              {
                  $('.main_header').stop().addClass('fixed').css('top', '-100px').animate(
                      {
                          'top': '0px'
                      }, 500);
              }
          }
          else
          {
              $('.main_header').removeClass('fixed');
          }
    });


});

E para finalizar vamos adicionar e CLASS fixed no CSS

.fixed { display:block; position:fixed; z-index:9; }

Viu Como deixar o Menu Fixo ao Rolar página é fácil e rápido.

Veja o código funcionando abaixo:

Baixar Código Veja Funcionando