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.
Table des matières de cette formation CSS (durée : 25m45s)
-
- Propriété Sticky : Théorie 00:08:11
- Mise en Application 00:16:18
- Conclusion 00:01:16
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Merci Carl, j'apprécie beaucoup ce type de tutoriel, très utile. Peut-être un tutoriel sur l'utilisation de la position sticky, cette fois-ci sur une sidebar, avec des icônes en plus du texte, que ce soit sur la gauche ou sur la droite. Merci beaucoup pour cet excellent cours. Validé 100 % Position : sticky.
-
Toujours , claire et précis. Un très bon format . en attente des suivants
-
Super , simple et efficace .
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Le code source de l'exercice d'application de la position sticky en CSS.
note moyenne
avis laissés