Astuce et code : créer un bloc ou menu Sticky sans plugin jQuery

Mathieu Chartier 2 février 2017 à 10:56 Tutoriels vidéo 4 commentaires

Effet Sticky jQuery sans plugin

Cela faisait un petit moment que je n'avais pas réalisé un tutoriel vidéo, alors voici une nouvelle idée de code simple pour vous amuser ou vous rendre service. Le mode Sticky est quelque chose de très en vogue dans les sites web, cela permet de "coller" des blocs fixes dans le viewport (fenêtre active) pour créer des effets ou pour améliorer le confort des utilisateurs.

L'exemple suivant montre le cas le plus courant, à savoir un Sticky menu, donc un menu qui suit le défilement de la page en fonction du scroll de l'utilisateur. Souvent, les plugins jQuery sont très bien développés mais son relativement "lourds" sans raison logique et explicable (sauf débogage potentiel). Ici, l'objectif est encore une fois d'améliorer la vitesse de chargement des pages en limitant le poids des scripts Javascript ou jQuery, tout en comprenant mieux le principe du collage Sticky. Bon visionnage à toutes et tous !

Tutoriel vidéo - Astuce et code : créer un bloc ou menu Sticky sans plugin jQuery

Conclusion

J'espère que la vidéo ci-dessus vous a plu, ou tout du moins a répondu à vos attentes. Sans plus attendre, voici le code complet présenté dans la vidéo, à télécharger ou à recopier et réadapter selon vos envies.

Télécharger “jQuery.sticky v.1.0.1 [.zip]”jquery.sticky-1.zip – Téléchargé 285 fois – 1 KB

/*
Créateur : Mathieu Chartier
Source : https://blog.internet-formation.fr/2017/02/astuce-et-code-creer-un-bloc-ou-menu-sticky-sans-plugin-jquery/
Date de création : 01/02/2017
Version : 1.01
Note de version : suppression de la gestion de l'offset Sticky
*/
$(document).ready(function() {
	/*====================================*/
	/*=========== Bloc Sticky ============*/
	/*====================================*/
	var options = {
		stickyBlock : "#entete", // bloc cible à rendre "sticky"
		stickyBlockClass : "sticky-box", // classe du bloc cible à rendre "sticky"
		stickyClass : "is-sticky", // classe qui active le mode "sticky" selon le niveau de scroll
		stickyEvents : "load scroll", // Ne doit pas être modifié en théorie !
		stickyActiveCSS : {
			"position":"fixed", // Position "fixed" pour le mode Sticky. Ne pas modifier !
			"width":"100%", // Recommandé de fixer la largeur à 100% pour ne pas avoir de bug
			"z-index":9999, // Recommandé de fixer un fort z-index pour passer au-dessus des contenus
			"top":0 // Optionnel : permet ici de coller le bloc Sticky en haut du viewport
		},
	};

	// On encadre le bloc ciblé par une DIV nécessaire pour faire l'effet sticky
	$(options.stickyBlock).wrap('<div class="'+options.stickyBlockClass+'"></div>');

	// On prend les dimensions par défaut du bloc (hauteur dynamique)
	var heightSticky = Math.round($(options.stickyBlock).outerHeight());

	$(window).on(options.stickyEvents, function() {
		// Récupération de la hauteur dynamiquement à chaque scroll (pour voir si elle change...)
		if(heightSticky > Math.round($(options.stickyBlock).outerHeight())) {
			var newHeightSticky = Math.round($(options.stickyBlock).outerHeight()); // Hauteur de l'entête
		}

		// Si on scroll au niveau du bloc sticky
		if($(window).scrollTop() > 0) {
			// Ajout de la classe d'activation du mode Sticky
			$("."+options.stickyBlockClass).addClass(options.stickyClass);

			// Récupération de la hauteur du bloc (utile si cette dernière change !)
			$("."+options.stickyBlockClass).height(newHeightSticky);

			// Application du style par défaut pour le bloc "sticky"
			$("."+options.stickyClass+" "+options.stickyBlock).css(options.stickyActiveCSS);
		}
		else // Si on est retourné au niveau le plus haut (donc plus de mode Sticky)
		{
			// Suppression de la class d'activation du mode Sticky
			$("."+options.stickyBlockClass).removeClass(options.stickyClass);

			// Récupération de la hauteur initiale (par défaut) du bloc "sticky"
			$("."+options.stickyBlockClass).height(heightSticky);

			// Suppression du style spécifique actif pour le mode Sticky
			$("."+options.stickyBlockClass+" "+options.stickyBlock).removeAttr('style');
		}
	});
});

 

4 commentaires

  • JC dit :

    Bonjour,

    tout d'abord merci beaucoup pour le code que tu mets à notre disposition.

    Je suis néophyte en javascript et, dans l'urgence, j'ai voulu utilisé ton code mais je n'arrive pas à le faire fonctionner

    Pourrais tu me dire quels sont les paramètre que je dois modifier pour l'adapter à mon cas.

    pour l'instant je n'ai modifié que cette ligne : stickyBlock : "#menuGauche", // bloc cible à rendre "sticky"

    Merci encore pour ton aide
    Cordialement

    JC

    • Salut,
      Le plus simple est peut-être que tu ailles sur mon site explicatif : https://testeur.ml/sticky-zone-js. Il y a des exemples d'utilisation avec les codes correspondants.
      L'usage le plus simple est juste d'appeler la zone à rendre "Sticky" avant l'objet du plugin, comme ceci :
      jQuery(document).ready(function($) {
      $('ID_OU_CLASSE_DU_BLOC-STICKY').stickyZone();
      });
      N'oublie pas de charger jQuery et le fichier du plugin en amont bien entendu. ;-)

  • Sébastien dit :

    Merci pour ce code très bien expliqué.
    Etant novice, pourrais-tu préciser comment intégrer cela dans un site wordpress ?
    Merci

    • Et bien de rien. :-)
      Sache que j'ai une version plus complète et élaborée sur mon site de script, à cette adresse : https://testeur.ml/sticky-zone-js. C'est plutôt cette version que je te conseillerais.
      Pour intégrer ça dans WordPress, il faudrait que tu passes par le fichier functions.php en utilisant la fonction wp_enqueue_script pour ajouter les scripts utiles et les dépendants (ici "jquery"). La documentation de WordPress (codex) donne des exemples, va voir mon lien.

      En prenant en compte que tu utiliserais ma version sur Testeur.ml, tu aurais un fichier jquery.stickyZone.min.js qui correspond au plugin jQuery. Il te faudrait un second fichier pour lancer le plugin (certains thèmes ont un fichier "scripts.js" fourre-tout) que j'ai appelé ici jquery.stickyZone-script.js pour l'exemple. Ce deuxième fichier dépend du premier, qui lui-même dépend de jQuery. En WordPress, voici en gros ce que tu devrais donc écrire pour être dans les règles de l'art (dans le fichier functions.php) :
      function stickyMenu() {
      wp_enqueue_script('stickyzone-menu', get_template_directory_uri().'/js/jquery.stickyZone.min.js', array('jquery'), false, true);
      wp_enqueue_script('stickyzone-script', get_template_directory_uri().'/js/jquery.stickyZone-script.js', array('sticky-menu'), false, true);
      }
      add_action('wp_enqueue_scripts', 'stickyMenu');

  • Déposer un commentaire

    L'adresse de messagerie ne sera pas publiée.* Champs obligatoires