Javascript Training Series : Fixer une navigation au scroll
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Javascript Training Series : Fixer une navigation au scroll

Sébastien Imbert
6,00€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tutoriel vidéo 100% Javascript, je vous propose d'apprendre à fixer une navigation (ou n'importe quel autre élément) au scroll.
Si fixer un élément sur le viewport est plutôt simple en CSS, le faire au scroll demande la réalisation d'un script Javascript.

Au cours de ce tutoriel fixer une navigation au scroll en Javascript :

Nous réaliserons un atelier pratique d'un sticky menu (menu qui reste toujours visible même au scroll dans la page), en Vanilla Javascript, c'est à dire sans librairie, pour bien comprendre le mécanisme du script que nous développerons. Nous verrons :

  • comment travailler avec la console du navigateur,
  • l'événement scroll,
  • les propriétés scrollY, offsetTop et clientHeight,
  • la méthode addEventListener(),
  • comment faire une condition en if et else,
  • comment changer le style d'un élément,
  • comment ajouter et retirer une class sur un élément,

Je reste disponible dans le salon d'entraide et les fichiers sources sont fournies.
 

Quelques mots sur Javascript Training Series

Javascript Training Serie est une série de tutoriels entièrement consacrée au Javascript. L'objectif est de vous aider à progresser en réalisant des exercices concrets
Vous apprendrez à utiliser les propriétés et méthodes Javascript, à créer des fonctions, des conditions, des boucles, écouter des événements, à réaliser vos scripts étape par étape à l'aide de la console du navigateur, et à commenter votre code.
Pour que vous puissiez aussi participer à la réalisation du script, je ne donne pas la solution de manière brutale, j'essaie de vous mettre sur la voie à chaque vidéo.
Dans ces tutos, je n'utilise pas de framework ou librairie, tous les scripts sont réalisés en Vanilla Javascript (Javascript pur).
Pourquoi faire du Vanilla Javascript ? Car une bonne maîtrise du Javascript entraînera une meilleure assimilation des frameworks et librairies (jQuery, Angular, React, Vue ...).
Pour résumer, Javascript Training Serie à pour but de vous rendre meilleur et plus autonome en Javascript.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
On se pose les bonnes questions et on écoute le scroll
Leçon 2
On fixe la navigation avec une condition
Leçon 3
On optimise le script en ajoutant une class CSS
Leçon 4
On ajoute un padding sur le body au scroll

Plan détaillé du cours

Leçon 1On se pose les bonnes questions et on écoute le scroll
11m21s
Leçon 2On fixe la navigation avec une condition
10m11s
Leçon 3On optimise le script en ajoutant une class CSS
10m28s
Leçon 4On ajoute un padding sur le body au scroll
04m50s

Aperçus

Avis des apprenants

Détail des avis
251
Apprenants
18
Commentaires
4,9/5
Note moyenne
5/5
17
4/5
0
3/5
1
2/5
0
1/5
0
Jean-Philippe Mouzet
Jean-Philippe Mouzet
Publié le 22/07/2024
Quel régale de voir ce que l'on peut faire avec le JavaScript et le CSS. Cela rend vraiment très très bien. Merci
Valérie Arno
Valérie Arno
Publié le 15/06/2024
Un bon tuto avec de nombreuses explications, ce qui permet de prendre des notes ou de mettre des commentaires à notre code pour s'y référer plus tard. J'ai toujours eu du mal à comprendre ou du moins à retenir le système du scoll pour ce genre d'application. Là c'est beaucoup plus clair. Merci beaucoup Sébastien et à bientôt.
Aytcheré Dieudonné Dakpo
Aytcheré Dieudonné Dakpo
Publié le 11/04/2024
pas facile pour un débutant

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

JavaScript

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le fichier source contient un dossier "start", qui contient les fichiers html et css, sans le fichier javascript pour que vous puissiez réaliser le script en suivant le tutoriel, ainsi qu'un dossier "end" qui contient tous les fichiers html, css et js.

Payer plus tard

Prix d'achat : 6,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 1389 tutos gratuits

Notre politique de protection des données