Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

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

Màj le 13 septembre 2022

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é.

ajouter entete fixe à thème genesis

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.


Vous aimerez également...

  • Permettre aux utilisateurs de joindre des fichiers dans les commentaires WordPress
  • Créer un mu-plugin (plugin de fonctions globales) sous WordPress
  • Comment désactiver Disqus pour custom post type sous Wordpress
  • Corriger erreur 403 dans Wordpress
  • Ajouter des boutons colorés simple en css à votre site
  • Comment Déplacer les codes JavaScript dans le footer

Classé sous :Tutoriels

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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • 5 façons pour trouver la clé de produit (serial) Windows facilement
  • Ajouter une Image mise en avant (featured image) sous le titre de vos article
  • 13 thèmes WordPress polyvalents pour sites des crypto-monnaies pour obtenir un site bien classé
  • C’est quoi l’API WordPress Heartbeat et pourquoi devriez-vous la contrôler ?
  • Créer un message d’incitation à réautoriser les annonces Adsense sans plugin

© 2023 ·Wpcours.com · Mentions · Contact