Le positionnement sticky

La valeur sticky permet à un élément de rester dans le flux normal, puis de se coller pendant le défilement. C'est justement ce qui la rend intéressante: elle se situe à mi-chemin entre un bloc classique et un élément fixé à l'écran.

Introduction à la propriété sticky

Un exemple très concret de sticky, c'est une aside placée à côté d'un article. C'est par exemple ce qui est utilisé sur cet article de blog. Pendant que le lecteur descend dans le contenu principal, cette colonne latérale peut rester visible pour afficher un sommaire, des liens utiles ou un petit rappel.

C'est d'ailleurs un cas d'usage très courant sur un blog: l'article défile, mais l'aside continue d'accompagner la lecture pendant une partie du scroll, comme sur cet exemple concret. On garde donc une information importante sous les yeux sans bloquer toute la page.

Quand un élément est en position: sticky;, il se comporte d'abord comme un bloc normal. Il prend donc sa place habituelle dans la page, et les autres éléments se placent autour de lui normalement.

Puis, au moment où l'on fait défiler la page, cet élément peut se coller à une limite définie avec top, right, bottom ou left. Tant que son conteneur n'est pas sorti de la zone visible, il reste accroché.

À première vue, cela ressemble à fixed. Pourtant, le comportement n'est pas le même. Avec sticky, l'élément reste attaché à son conteneur et ne quitte pas complètement le flux normal.

						
							<aside class="menu-lateral">
								Menu de la page
							</aside>
							<div class="contenu">
								<p>Beaucoup de texte...</p>
							</div>
						
					

						
							.menu-lateral{
								position: sticky;
								top: 0;
							}
						
					

Dans cet exemple, le bloc .menu-lateral reste à sa place au début. Ensuite, quand on descend dans la page, il vient se coller en haut de la zone visible.

Définir une marge à notre bloc

Pour que sticky soit vraiment visible, il faut presque toujours définir une distance avec top, bottom, left ou right. Sans cela, le navigateur ne sait pas à partir de quelle limite l'élément doit se coller.

Dans la pratique, on utilise très souvent top. C'est lui qui crée l'espace entre le haut de la fenêtre et l'élément collé. Cette valeur accepte les unités CSS habituelles comme px, %, em, rem, vw ou vh.

						
							<div class="zone-scroll">
								<p>Ligne 1</p>
								<p>Ligne 2</p>
								<div class="etiquette">Je reste visible</div>
								<p>Ligne 3</p>
								<p>Ligne 4</p>
								<p>Ligne 5</p>
								<p>Ligne 6</p>
								<p>Ligne 7</p>
								<p>Ligne 8</p>
								<p>Ligne 9</p>
								<p>Ligne 10</p>
							</div>
						
					

						
							.zone-scroll{
								height: 220px;
								overflow: auto;
							}

							.etiquette{
								position: sticky;
								top: 20px;
							}
						
					

Le point important est le suivant: l'élément ne se colle pas au chargement de la page. Il attend d'atteindre la limite définie par top, puis il se fixe à cet endroit.

Les cas où sticky ne marchera pas

Le positionnement sticky donne souvent l'impression de "ne pas marcher", alors que le problème vient en réalité du contexte autour de l'élément.

Voici les cas les plus fréquents à vérifier :

• vous avez oublié top, bottom, left ou right,
• le conteneur ne défile pas vraiment, donc l'effet sticky ne peut pas se voir,
• un parent possède un overflow qui change la zone de défilement attendue,
• l'élément sticky est plus grand que l'espace disponible dans son conteneur.

Attention ! Le cas le plus trompeur vient souvent d'un parent avec overflow: hidden;, overflow: auto; ou overflow: scroll;. L'élément sticky ne se repère alors plus forcément par rapport à toute la page, mais par rapport à cette zone de défilement.

						
							<div class="colonne">
								<div class="bloc-sticky">Bloc</div>
								<p>Du contenu...</p>
							</div>
						
					

						
							.colonne{
								overflow: hidden;
							}

							.bloc-sticky{
								position: sticky;
								top: 0;
							}
						
					

Dans ce cas, on croit souvent que sticky est cassé. En réalité, c'est le contexte de défilement qui a changé. Voilà pourquoi il faut toujours vérifier les parents de l'élément avant de conclure que la propriété ne fonctionne pas.

Différence entre sticky et fixed

La différence la plus importante est simple :

• sticky reste lié à son conteneur,
• fixed reste lié à la fenêtre du navigateur.

Avec fixed, l'élément est retiré du flux normal et reste visible même si l'on continue à descendre dans toute la page. C'est pratique pour un bouton de retour en haut, une barre flottante ou un menu toujours affiché.

Avec sticky, l'élément garde d'abord sa place normale. Ensuite, il se colle seulement pendant une partie du défilement, puis il s'arrête en même temps que son conteneur.

						
							.sommaire{
								position: sticky;
								top: 20px;
							}
						
					

						
							.bouton-retour{
								position: fixed;
								right: 20px;
								bottom: 20px;
							}
						
					

Si vous voulez qu'un bloc accompagne seulement une partie de la lecture, choisissez sticky. Si vous voulez qu'un élément reste visible à l'écran quoi qu'il arrive, choisissez plutôt fixed.

Retenez donc ceci: sticky colle temporairement dans sa zone, fixed reste fixé à l'écran.