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

Mathieu Chartier 2 février 2017 à 10:56 Tutoriels vidéo 0 commentaire

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é 141 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');
		}
	});
});