JS moderne, EXO #3 : Fixer une barre de navigation au scroll
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO JS moderne, EXO #3 : Fixer une barre de navigation au scroll

Carl Brison
12,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Continuons à manipuler le JavaScript moderne que nous avons appris ensemble dans la série de tutos dédiées à l'apprentissage du JavaScript moderne.

Tuto JS moderne, EXO #3 : Fixer une barre de navigation au scroll

Pour cet exercice pratique, nous allons apprendre à mettre en place une barre de navigation dont la particularité sera que lorsque celle-ci touchera le haut de la fenêtre du navigateur, alors, elle devra rester toujours visible à l'écran (c'est ce qu'on appelle aussi un sticky menu).
Fixer une barre de navigation au scroll est de plus en plus fréquent sur les sites Internet et permet une meilleure expérience utilisateur (l'élément fixé, comme le menu restant toujours visible et accessible).

Je vous propose donc un cours ainsi qu'un exercice concret pour pra-ti-quer !

L'exercice sera dans un second temps, plus complexe, afin de pouvoir répondre à toutes les attentes pour ce genre de comportement d'une barre de navigation.

Tous les fichiers de travail sont fournis !
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 suivre ce tutoriel dans de bonnes conditions, il est recommandé de connaître :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Cours
Chapitre 2
Exercice simple
Chapitre 3
Exercice complexe
Chapitre 4
Conclusion

Plan détaillé du cours

Chapitre 1 : Cours
23m43
 
Leçon 1Récupérer la hauteur entre la barre de nav et le haut de la fenêtre
Leçon 2Récupérer le nombre de pixels défilés verticalement
Leçon 3Fixer la barre de navigation
Chapitre 2 : Exercice simple
24m06
 
Leçon 1Mise en place du code HTML
Leçon 2Mise en place du code CSS
Leçon 3Fixer la barre de navigation
Chapitre 3 : Exercice complexe
14m57
 
Leçon 1Présentation
Leçon 2Calcul de la largeur de la fenêtre
Leçon 3Mise en place du code CSS Grid
Chapitre 4 : Conclusion
01m57
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
65
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 13/06/2023
J'ai bien apprécié cette façon de bloquer la nav en haut et la technique css/javascript pour le faire et je me suis souvenue après coup que j'avais déjà vu ce cours dans le bundle javascript. Pas grave, puisque je l'avais oublié :-) Cependant les barres de nav et moi on n'est pas copines. J'ai toujours beaucoup de liens qui m'empêchent de faire ce que je veux et les menus déroulants, à exclure (surtout pour les petits écrans). Qui sait ? Peut-être qu'un jour je trouverai des solutions et que j'aurai l'occasion d'expérimenter ce système. Merci encore pour tous vos rappels.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire, Valérie ;-)
Alain Tardif
Alain Tardif
Publié le 25/01/2023
Merci Carl pour ce tuto. Franchement, c'est toujours avec grand plaisir de suivre vos formations. Toutes ces techniques sont gardées précieusement dans ma boîte à outils et vont me suivre partout. Validé 100 % JS moderne - EXO#3.
Carl Brison
Carl Brison
Merci beaucoup ;-)
Jean-Claude Warg-Briers
Jean-Claude Warg-Briers
Publié le 19/10/2022
Super ce tuto, toujours bien expliqué dans le détail.
Carl Brison
Carl Brison
Merci, c'est très gentil ;-)

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 des exercices de ce tutoriel.

Payer plus tard

Prix d'achat : 12,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1429 tutos gratuits

Notre politique de protection des données