Genesis Smart Header – Ocultar na rolagem, mas mostrar na rolagem para cima

Procedimento para implementar o cabeçalho fixo inteligente no WordPress Genesis

O cabeçalho fixo é uma ótima maneira de permitir que os visitantes navegar através do seu site quando estiver no meio da página ou post. Isso ajuda os leitores a irem para o menu de cabeçalho para uma navegação mais aprofundada.

Mas há um problema.

O cabeçalho fixo sempre aparece na tela quando você rola para baixo. O que é bom, mas se estiver navegando em um dispositivo pequeno, isso prejudicaria a legibilidade.

Então, qual é a solução?

Um cabeçalho inteligente – ocultar quando você rolar para baixo, mas mostrar imediatamente ao tentar rolar para cima. Parece legal?

Eu testei isso no Authority Pro tema. Faça um backup de um arquivo existente para poder restaurá-lo se algo der errado.

Adicione o seguinte em functions.php arquivo

//* Smart Header Functions
add_action('wp_footer','tecnologico_header_sticky_script');
function tecnologico_header_sticky_script()
{
?>
	<script>	
		// Hide Header on Scroll Down but Show when Scroll Up
		var didScroll;
		var lastScrollTop = 0;
		var delta = 5;
		var navbarHeight="";

		jQuery(window).load( function() {
			navbarHeight = jQuery('header.site-header').outerHeight();
			jQuery('body').css('paddingTop',navbarHeight);
		});

		jQuery(window).scroll(function(event){
			didScroll = true;
		});

		setInterval(function() {
			if (didScroll) {
				tecnologico_hasScrolled();
				didScroll = false;
			}
		}, 250);

		function tecnologico_hasScrolled() 
		{
			var st = jQuery(this).scrollTop();
			
			// Make sure to scroll more than delta
			if(Math.abs(lastScrollTop - st) <= delta)
				return;
			
			// If scrolled down and are past the navbar
			// This is necessary so you never see what is "behind" the navbar.
			if (st > lastScrollTop && st > navbarHeight){
				// Scroll Down
				jQuery('header.site-header').css('top',-navbarHeight).removeClass('shadow');
			} else {
				// Scroll Up
				if(st + jQuery(window).height() < jQuery(document).height()) {
					jQuery('header.site-header').css('top',0).addClass('shadow');
				}
			}
			
			if (st < 15){
				jQuery('header.site-header').css('top',0).removeClass('shadow');
			}
			
			lastScrollTop = st;
		}
	</script>	
<?php
}

E abaixo no arquivo style.css

  /* Smart Header */

 header .site-header  {
           position :  fixed ;
           top :  0 ;
           transition :  top  0.3s  ease-in-out ;
           width :  100 %;
           z-index :  9 ;
           left :  0 ;
           right :  0 ;
 }

 header .site-header.shadow  {
           -webkit- box-shadow :  0  0  50px  rgba( 0 , 0 , 0 , .15 ) ;
           box-shadow :  0  0  50px  rgba( 0 , 0 , 0 , .15 ) ;
 }

 body .admin-bar  header .site-header{
           top :  32px ;
 }

 @media  only  screen  and  ( max-width :  780px ) 
 {
           body .admin-bar  header .site-header{
                   top :  46px ;
           }

 }

Atualize a página para ver o resultado. Não se esqueça de limpar o cache, se houver.

Você gosta desta pequena otimização?

Artigos relacionados