Tornar a barra de navegação fixa ao rolar a página

Como fixar a barra de navegação #navbar ao passar pelo elemento no momento da rolagem da página?

Adicione o estilo que irá fixar a barra de navegação ao campo personalizado CSS Adicional:

.navbar-fixed {
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 999;
}

Adicione o script usando o arquivo custom-functions.php:

function voorus_fix_navbar_on_scroll() {
 echo "
 <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
 <script>
 $(document).ready(function() {
 
 $(window).scroll(function () {
 //if you hard code, then use console
 //.log to determine when you want the 
 //nav bar to stick. 
 console.log($(window).scrollTop())
 if ($(window).scrollTop() > $('.inner-header').innerHeight()) {
 $('#navbar').addClass('navbar-fixed');
 }
 if ($(window).scrollTop() < $('.inner-header').innerHeight()) {
 $('#navbar').removeClass('navbar-fixed');
 }
 });
 });
 </script>";
}
add_action('wp_footer', 'voorus_fix_navbar_on_scroll');

Observações:

$('.inner-header').innerHeight()

Fornece a altura renderizada do elemento. Assim, esta solução é viável em todos os dispositivos.

Para definir a altura manualmente use:

if ($(window).scrollTop() > 155) {
 $('#navbar').addClass('navbar-fixed');
 }

if ($(window).scrollTop() < 156) {
 $('#navbar').removeClass('navbar-fixed');
 }

No entanto esta solução não funciona tão bem, já que a altura do elemento varia de acordo com o dispositivo onde foi renderizado.


Referências:
How to create a sticky navigation bar that becomes fixed to the top after scrolling
CSS / JavaScript – How do you get the rendered height of an element?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *