13,00

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

13,00

  • Une formation vidéo de 1h04m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
JS moderne, EXO #3 : Fixer une barre de navigation au scroll

ajouter ce cours aux favoris retirer ce cours des favoris

Retrouvez cette formation dans le bundle :

Bundle 10 exercices 100% frontend HTML, CSS et JS

-28% de réduction

voir les détails du bundle


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 :

Table des matières de cette formation JavaScript, CSS (durée : 1h04m)

  • Cours
    • Récupérer la hauteur entre la barre de nav et le haut de la fenêtre 00:10:05
    • Récupérer le nombre de pixels défilés verticalement 00:05:04
    • Fixer la barre de navigation 00:08:34
  • Exercice simple
    • Mise en place du code HTML 00:03:08
    • Mise en place du code CSS 00:12:01
    • Fixer la barre de navigation 00:08:57
  • Exercice complexe
    • Présentation 00:02:21
    • Calcul de la largeur de la fenêtre 00:05:22
    • Mise en place du code CSS Grid 00:07:14
  • Conclusion
    • Conclusion 00:01:57



Formateur : Carl Brison

Carl Brison a publié 278 tutoriels et obtenu une note moyenne de 4,9/5 sur 17 686 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

3
avis laissés
5 étoiles
3
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de membre-7129-6122 laissé le 19/10/2022
    Super ce tuto, toujours bien expliqué dans le détail.

  • 5
    avis de zolb laissé le 01/07/2021
    Merci pour ce joli tuto! J'ai voulu fixer également la "nav verticale" en attribuant la classe "fixe" à ul. Ça marche, mais je ne parviens pas à garder le menu centré. Pour ce faire, j'ai recours à une classe "fixe_2" qui est "fixe" avec l'ajout "width: 20%". Ça marche, mais me semble peu élégant... Y a-t-il un autre moyen?
    "Merci pour votre commentaire. Si ce que vous avez fait fonctionne, c'est très bien. Ensuite vous pouvez l'améliorer en le reprenant du général vers le détail et en utilisant le css moderne, à savoir grid ou/et flexbox"

  • 5
    avis de ahmidou laissé le 21/02/2021
    Très bon tuto, bien expliqué par Carl comme toujours! Merci.
    "Merci beaucoup, c'est très gentil ;-)"

  • 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.
Parcours Developpeur Front End
accédez à plus de 1463 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données