Ajouter un Entête Smart à Genesis (se cache au défilement vers le bas)

L’en-tête collant (sticky header) est un excellent moyen pour permettre aux visiteurs de votre site web de naviguer facilement sur votre site surtout lorsqu’ils sont au milieu de la publication. cette technique aide les lecteurs à accéder au menu d’en-tête pour une navigation plus approfondie.

L’Entêté fixe classique utilisé par la plupart des sites Web s’affiche toujours à l’écran lorsque vous faites défiler vers le bas. Ce qui est correct, mais si vous naviguez sur un petit appareil, cela perturbera la lisibilité.

Alors, quelle est la solution ?

Un en-tête intelligent -se cache lorsque vous faites défiler vers le bas, mais s’affiche immédiatement lorsque vous essayez de faire défiler vers le haut. Cela paraît bien?

Pour faire simple et pour passer à l’action, ajoutez ce qui suit dans le fichier functions.php :

//* Smart Header Functions
add_action('wp_footer','geekflare_header_sticky_script');
function geekflare_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) {
				geekflare_hasScrolled();
				didScroll = false;
			}
		}, 250);

		function geekflare_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
}

Maintenant vous devez ajouter le code suivant à votre feuille de style :

/* 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;
        }

} 

Il ne vous reste que d’actualiser votre page pour voir les modifications sur le champs.