Como fazer sua navegação Divi começar na parte inferior e, em seguida, permanecer fixo no topo ao rolar

No tutorial do Divi de hoje mostraremos, passo a passo, como fazer uma navegação fixa no seu site ao rolar e depois de passar da altura da tela inteira. Se você seguir as etapas deste artigo e recriar a navegação fixa, verá que a navegação trará um efeito de interação agradável para o seu menu principal e para o seu site em geral.

Vamos começar criando uma navegação vertical normal na tela. Em vez de ficar no topo da página, essa navegação será empurrada para a parte inferior da tela. Depois de rolar e depois de passar a altura do menu na tela, você verá que o menu mudará de posição e será colocado no topo da página. Uma vez que a navegação se torna fixa, ela permanecerá fixa em todo o resto da página. Mas assim que você rolar de volta para a seção do herói, a navegação se comportará normalmente novamente e será colocada na parte inferior da seção do herói.

Você poderia dizer que a página 'pegará' o menu na parte inferior da tela e dará aquele efeito avançado que você está procurando. Para ajudá-lo a visualizar o resultado que estamos tentando alcançar, vamos dar uma olhada no resultado final:

Seção Hero: Módulo de cabeçalho de largura total com modo de tela inteira

Há uma coisa a levar em consideração ao usar esse efeito para o seu site; você precisa de um Módulo de cabeçalho em modo de tela inteira. Teoricamente, você também pode aplicar isso a outros módulos e seções, mas terá que fazer algumas modificações para garantir que o menu apareça na parte inferior dessa seção. A opção de tela cheia que o Divi oferece garante que a seção do herói preencha a tela (quaisquer que sejam as medidas da tela), é por isso que recomendamos usá-la se você quiser aplicar este efeito ao seu menu.

Comece abrindo ou criando a página onde deseja adicionar este efeito. Em seguida, abra o cabeçalho Fullwidth ou crie-o e vá para a guia Design. A primeira coisa que você encontrará na guia de design é a subcategoria Layout. Vá em frente e ative o modo de tela inteira nessa subcategoria.

Criando a navegação fixa ao rolar

Para adicionar o efeito ao nosso site, precisaremos fazer uso de algumas linhas de código CSS e algumas linhas de código jQuery. O código CSS que usaremos colocará a navegação na parte inferior da tela e fará com que se comporte como um rodapé normal antes que o código jQuery seja ativado. Depois disso, as linhas de código jQuery assumirão o lugar do código CSS personalizado e permitirão que a navegação se comporte de acordo com sua posição no site.

Adicione o código CSS necessário

Começaremos adicionando o código CSS necessário ao nosso site. Geralmente, existem três maneiras de fazer isso. As duas primeiras maneiras de fazer com que o código se aplique a todo o site. O terceiro método faz com que funcione apenas para uma página.

Adicionar código CSS por meio do personalizador de tema

O primeiro método que mostraremos permite adicionar o código por meio do Theme Customizer. Esta é uma forma de adicionar código que não é muito usada, mas tem algumas vantagens. Uma delas é que, assim que adicionar o código, você perceberá que as mudanças acontecem em tempo real.

Para adicionar o código CSS, abra o painel do WordPress> vá para Aparência> Personalizar> Role a guia para baixo e abra a guia CSS adicional> Adicione as seguintes linhas de código CSS:

#main-header {
position: absolute;
top: auto;
bottom: 0;
}

Adicionar código CSS por meio de opções de tema

Outra opção que você tem, que também é a mais comum usada, é adicionar o código CSS às Opções de tema do seu site Divi. Depois de adicionar o código, ele se aplicará a todo o site. Se você estiver procurando por uma possibilidade que adiciona o efeito a apenas uma página, vá para a próxima possibilidade, onde você pode adicionar o código a uma página em particular.

Para adicionar o código às suas opções de tema; vá para o painel do WordPress> Divi> Opções de tema> Role para baixo na guia Geral e cole o seguinte código no campo CSS personalizado:

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Adicionar código CSS a apenas uma página

Essa possibilidade pode ser interessante se você quiser aplicar essa navegação fixa a apenas uma página, mas não ao resto do site. Se você estiver usando o cabeçalho de largura total apenas na página inicial, por exemplo, talvez queira usar este método.

Abra a página onde deseja adicionar a navegação fixa ao rolar. Em seguida, você verá o seguinte símbolo no canto direito do construtor:

Clique nele e você verá uma tela onde você pode fazer modificações em toda a página. Adicione o seguinte código na caixa CSS personalizado para aplicá-lo a essa página em particular:

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Adicione o código jQuery necessário

A próxima etapa que queremos realizar é adicionar o código jQuery ao nosso site WordPress. Este código começará a funcionar a partir do momento em que você rolar. Podemos adicionar o código jQuery de duas maneiras; através das Opções de Tema ou através do Módulo de Código. Se você deseja adicionar o código a apenas uma página, você pode usar o Módulo de Código em combinação com a terceira possibilidade que mencionamos para o código CSS neste post.

Adicionar código jQuery por meio de opções de tema

Para aplicar o código a todas as páginas do seu site, você pode adicionar o código às Opções de tema. Vá para o painel do WordPress> Vá para Divi> Continue to Theme Options> Abra a guia Integration> E cole o seguinte código no campo '<head> of your blog':

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

Adicionar código jQuery por meio do módulo de código

Se quiser adicionar o código a uma página em particular, você pode fazer isso por meio do Módulo de Código. Na parte anterior, onde adicionamos o código CSS, você deve ter escolhido a última opção.

Volte para essa página e adicione uma seção padrão ao topo de sua página. Dentro dessa seção padrão, adicione um Módulo de código. Na verdade, você pode colocar esta seção onde quiser, mas se quiser encontrá-la rapidamente, recomendamos colocá-la no topo da página. Em seguida, copie e cole o seguinte código na caixa de conteúdo do seu módulo de código:

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

E é isso! O código agora deve funcionar, transformar seu menu e tornar seu site um pouco mais interativo.

Pensamentos finais

Neste post, mostramos como criar uma navegação fixa ao rolar. Fornecemos algumas linhas de código CSS e algumas linhas de código jQuery que devem resolver o problema. Se você seguiu este post passo a passo, deve conseguir obter o resultado final. Se você tiver dúvidas ou sugestões para próximos posts; sinta-se à vontade para deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por DenisXize / shutterstock.com