Sticky Zone JS v1.2

StickyZone est un plugin jQuery qui a pour objectif de rendre des blocs ou zones de page "collantes" (sticky). Cet effet est entré dans les moeurs des webmasters et webdesigners depuis quelques années et permet de figer des éléments dans une page afin d'améliorer l'accessibilité, l'UX design ou même le confort de navigation.

L'exemple le plus courant correspond aux Sticky menus, à savoir des menus figés en haut ou bas de page pour accompagner le défilement (scroll) des lecteurs. Nous retrouvons également les Sticky Sidebars, c'est-à-dire des blocs d'affichage contenus dans des colonnes latérales qui se figent pour suivre le défilement des pages. StickyZone peut en partie répondre à ces besoins, et cette page en est le parfait exemple puisque le menu et la colonne de gauche utilisent le plugin.

Lisez la documentation complète et visionnez les exemples ci-dessous pour vous familiariser avec l'outil, et profitez des diverses possibilités actuellement autorisées (le développement est continu et devrait évoluer) :

  • Utilisation multiple de plugin (plusieurs zones sticky).
  • Personnalisation du CSS via le plugin (objet JSON) ou via une feuille de style.
  • Récupération automatique ou non de la position Top de l'élement à rendre collant.
Télécharger stickyZone.js (v.1.2) [RAR - 3Ko]

Utilisation

Insertion dans le code HTML

Vous pouvez récupérer les URL des dernières versions des librairies externes sur ce site.

Inclusion du code Javascript

<!-- Normalement dans le <head>, idéalement avant </body> -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="CHEMIN_DOSSIER_JS/jquery.stickyZone.min.js"></script>

Lancement du script jQuery

<!-- Normalement dans le <head>, idéalement avant </body> -->
<script>
jQuery(document).ready(function($) {
	$(SELECTEUR).stickyZone();
});
</script>

Inclusion du fichier CSS personnalisé (optionnel)

<!-- Placé dans le <head> -->
<!-- Utile si vous avez besoin de styliser vos blocs Sticky -->
<link rel="stylesheet" type="text/css" href="stickyZone.css"/>

Simple usage

Utilisation par défaut du plugin stickyZone(), avec les options originelles. L'entête de la page suit le défilement et s'adapte en CSS en réduisant sa hauteur et en changeant les couleurs. L'entête reprend sa forme initiale lorsque le scroll revient en haut de page. Cet exemple correspond au cas typique d'utilisation d'un bloc Sticky.

N.B. : si vous souhaitez reproduire un tel effet, n'oubliez pas d'ajouter un padding au bloc à rendre Sticky afin que la hauteur mesurée par le plugin soit complète. Dans l'exemple fourni, si le padding était manquant pour le #header, la hauteur mesurée ne prendrait en compte que la hauteur des deux titres réunis.

Multiple usage

Utilisation multiple du plugin stickyZone(). Le premier bloc est l'entête et se fige dans sa position initiale tout en changeant de hauteur. Le second bloc (bleu) conserve sa position par rapport à l'entête grâce à l'option "stickyPrevBlock" et sa position gauche via l'option "stickyLeftAuto". Enfin, le paramètre "stickyTrigger" fixé à 0 permet à l'effet de s'activer au tout début du scroll, en même temps que pour l'entête. Ainsi, les deux blocs se figent avec une harmonie entre eux.

Options

Plusieurs options sont disponibles pour personnaliser le plugin Reading Indicator. Toutes ne peuvent pas fonctionner ensemble à tout moment, il convient de bien vérifier et paramétrer le plugin pour adapter le résultat à votre volonté. Les exemples proposés dans cette page donnent une idée des possibilités, bien que tout n'a pas été dévoilé.

Liste complète des options (avec valeurs par défaut)

var options = {
	stickyHeightSelector: '',
	stickyBlockClass: 'sticky-box',
	stickyClass: 'is-sticky',
	stickyEvents: 'load scroll',
	stickyTrigger: 'false',
	stickyTopAuto: false,
	stickyLeftAuto: false,
	stickyPrevBlock: false,
	stickyActiveCSS: {
		position: 'fixed',
		width: '100%',
		z-index: 9999,
		top: 0',
	},
};

Détails des options

  • stickyHeightSelector(empty)String
    Sélecteur du bloc qui sert pour récupérer la hauteur fixe (si vide, la hauteur du sélecteur du plugin jQuery est utilisée.
  • stickyBlockClass(sticky-box)String
    Classe ajoutée dans un bloc qui encadre les blocs sticky.
  • stickyClass(is-sticky)String
    Classe ajoutée lorsqu'un bloc passe en mode sticky. La classe se retire quand le bloc reprend sa position normale.
  • stickyEvents(load scroll)String [load / scroll / click / dblclick...]
    Événement(s) Javascript qui vont déclencher l'effet Sticky. En théorie, cette option ne devrait pas changer, sauf si vous souhaitez faire coller un bloc après un clic par exemple, etc.
  • stickyTrigger(false)Boolean (false / true), Integer
    Ce paramètre permet d'indiquer l'offset de déclenchement de l'effet Sticky. Si vous indiquer "false" ou "true", l'offset est calculé automatiquement et le mode Sticky se déclenche alors à la position Top du block. Si vous indiquez une valeur numérique, alors ce sera cette valeur qui fera office de déclencheur (par exemple, 0 si vous souhaitez que le bloc colle dès le début du scroll).
  • stickyTopAuto(false)Boolean [true / false]
    Permet de récupérer dynamiquement la position Top du bloc à rendre Sticky. Si le cas "true" est retenu, alors l'élément conservera sa position initiale.
  • stickyLeftAuto(false)Boolean [true / false]
    Permet de récupérer dynamiquement la position Left du bloc à rendre Sticky. Si le cas "true" est retenu, alors l'élément conservera sa position initiale.
  • stickyPrevBlock(false)Boolean [true / false]
    Si au moins deux blocs Sticky, l'option permet de conserver automatiquement l'espace (marge) entre ces deux blocs. Dans cette page par exemple, la colonne de gauche suit directement le menu sticky, elle ne doit donc pas être masquée par le menu. En mettant ce paramètre sur "true", la colonne conserve l'espacement entre les deux blocs lors du défilement (marge d'environ 1 cm à vue d'oeil).
    Attention : actuellement, cette option peut laisser apparaître une petite inertie dans certains cas voire un espacement quelque peu différent à cause du mode de calcul.
  • stickyActiveCSSJSON object
    • position(fixed)String [fixed / relative / absolute / inherit]
      Force la fixation du bloc dans la page (effet sticky).
    • width(100%)String
      Indique que le bloc Sticky doit occuper 100% de la largeur de la fenêtre. Ce critère est optionnel et doit s'adapter à votre configuration.
    • z-index(9999)Integer
      Permet d'afficher le bloc Sticky devant les autres blocs en cas de chevauchement. Ce critère est optionnel et doit s'adapter à votre configuration.
    • top(0)String, Integer
      Précise la position Top à partir de laquelle doit se bloquer l'élément Sticky. Ce critère est optionnel et doit s'adapter à votre configuration.