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?