10,00

Tuto JS moderne, EXO #9, Modifier la Nav sur l'événement scroll avec JavaScript

10,00

  • Une formation vidéo de 39m12s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
JS moderne, EXO #9, Modifier la Nav sur l'événement scroll

ajouter ce cours aux favoris retirer ce cours des favoris

Pour ce nouvel exercice dédié à la pratique du JavaScript moderne, nous allons nous amuser à donner des effets CSS sur une barre de navigation sous des conditions liées au JavaScript.

  • Tout d'abord, nous  fixerons la barre de navigation à l'écran lorsque celle-ci arrivera au sommet de la page web.
  • Puis lorsque l'utilisateur continuera de descendre sur la page web et qu'il arrivera sur une nouvelle zone, alors nous aplliquerons d'autres propriétés CSS à notre barre de navigation.

Pour suivre ce tutoriel dans de bonnes conditions, il est recommandé de connaître :

Table des matières de cette formation JavaScript (durée : 39m12s)

    • Mise en place du code HTML de base 00:07:13
    • Mise en place du code CSS 00:07:26
    • Calcul de la distance entre le haut du document et la barre de Nav 00:06:05
    • On fixe la barre de nav à l'écran 00:07:30
    • Modification de la barre de Nav une fois arrivée sur l'article 00:09:39
    • Conclusion 00:01:19



Formateur : Carl Brison

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

4,7
note moyenne

3
avis laissés
5 étoiles
2
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 4
    avis de zolb laissé le 09/01/2022
    Merci pour ce prolongement de l'EXO#3. Il me semble que l'endroit de la seconde transition devrait tenir compte de la hauteur de la nav pour une meilleure précision...

  • 5
    avis de membre-7698-6589 laissé le 26/12/2021
    Très bon tuto et bien expliqué

  • 5
    avis de jeanalb laissé le 09/12/2021
    Merci pour ce tuto, toujours aussi clair et pédagogique. C'est un plaisir de suivre vos tutos.
    "Merci beaucoup pour votre commentaire très gentil "

  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
  • Que contient le fichier source ?
    Le code source de l'exercice
Parcours Developpeur Front End
accédez à plus de 1407 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données