La position sticky en CSS / Concept + Exercice
ERROR
00:00
00:00

Tuto La position sticky en CSS / Concept + Exercice

Carl Brison
2,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Propriété Sticky : Théorie
Leçon 2
Mise en Application
Leçon 3
Conclusion

Plan détaillé du cours

Leçon 1Propriété Sticky : Théorie
08m11s
Leçon 2Mise en Application
16m18s
Leçon 3Conclusion
01m16s

Avis des apprenants

Détail des avis
11
Apprenants
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 27/05/2023
J'avais déjà vu la position sticky mais sans vraiment savoir l'utiliser. En tout cas pas de cette façon. Et j'en aurai peut-être l'utilité dans mes pages. Merci beaucoup pour ces bonnes explications :-)
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire, Valérie ;-)
Alain Tardif
Alain Tardif
Publié le 20/03/2023
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.
Carl Brison
Carl Brison
Merci beaucoup Alain.
Regis Philippe
Regis Philippe
Publié le 19/03/2023
Toujours , claire et précis. Un très bon format . en attente des suivants
Carl Brison
Carl Brison
Merci beaucoup ;-) !

Vos questions sur le cours

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.

Attendez ! 🤗

Accédez à plus de 1452 tutos gratuits

Notre politique de protection des données