$ 6.00

Tuto Javascript Training Series : Fixer une navigation au scroll avec JavaScript

$ 6.00

  • Une formation vidéo de 36m50s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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.

Table des matières de cette formation JavaScript (durée : 36m50s)

    • On se pose les bonnes questions et on écoute le scroll 00:11:21
    • On fixe la navigation avec une condition 00:10:11
    • On optimise le script en ajoutant une class CSS 00:10:28
    • On ajoute un padding sur le body au scroll 00:04:50



Formateur : Sébastien Imbert

Sébastien Imbert a publié 23 tutoriels et obtenu une note moyenne de 4,9/5 sur 6 506 tutoriels vendus. Voir les autres formations de Sébastien Imbert

5,0
note moyenne

9
avis laissés
5 étoiles
9
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de jefb31 laissé le 05/08/2019
    Merci pour cet excellent tuto qui me permet de réviser mes connaissances en javascript . cours en pas a pas détaillé et sur un exemple concret . merci pour ce tuto .

  • 5
    avis de tedm laissé le 28/07/2019
    Tuto très sympa. j'ai découvert pas mal de choses. Merci Sébastien :)

  • 5
    avis de membre-6010-4341 laissé le 21/06/2019
    Diction très agréable, rythme adapté, explications claires, des infos utiles tout le long du tuto. Une série excellente ! merci pour votre initiative de créer ces exercices pratiques. Grâce à vous j'arrive à donner du sens à toute la théorie ingurgitée jusqu'à présent. Merci beaucoup.

  • 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.
accédez à plus de 1078 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données