La position sticky en CSS / Concept + Exercice

Plus on connaît de théorie et plus il est aisé de réaliser des sites web de plus en plus complexes.
C'est pour cela que je vous propose une nouvelle série de tutos, dans laquelle nous parlerons d'un concept avec une approche théorique, suivie d'un exercice pour mettre en application le concept abordé ! 

Pour ce 1er volet, nous allons étudier la position sticky d'un élément (ou de plusieurs) d'une page web grâce au langage CSS.

Le positionnement "sticky" en CSS est une propriété qui permet à un élément de se comporter comme un autocollant dans la fenêtre du navigateur, lorsque l'utilisateur fait défiler la page (scroll).
Concrètement, lorsqu'un élément est défini comme "sticky", il suit normalement le flux de la page jusqu'à ce qu'il atteigne une certaine position, à partir de laquelle il se "colle" à la fenêtre et reste visible à l'écran même lorsque l'utilisateur continue de défiler.
Cela peut être utile pour créer des éléments de navigation qui restent visibles en haut de la page par exemple.
Il est en général utilisé pour améliorer l'expérience utilisateur sur un site ou une application.

Dans ce cours en ligne je vous parlerai de cette propriété "sticky" :

• dans un environnement global,
• dans un environnement local.

Puis, nous passerons à la pratique en réalisant un exercice de positionnement d'éléments Sticky en CSS.
Je mets les codes de l'exercice d'application à votre disposition avec ce tuto.

Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Pour compléter vos compétences, je vous propose d'apprendre, dans cet autre cours, à réaliser un positionnement "sticky" avec Javascript.