Rétrécir un <nav> au scroll down

Bonjour,

je débute le javascript et j'ai 2 soucis avec une fonction.

J'aimerais lors d'un scrolldown de 50px minimum réduire la hauteur de mon nav en mettant son padding à 0, et lorsque la largeur de la fenêtre est inférieure à 1300px laisser un padding-top de 10px.
Le code contenu dans le else fonctionne bien si je n'utilise que celui-ci mais lorsque je veux ajuster la fonction pour les largeurs de fenêtre inférieures à 1300px cela ne fonctionne pas et je ne vois pas l'erreur 8O

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

window.onscroll = function(){ navScroll() };   function navScroll() { if (window.innerWidth < 1300) && (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50){ document.querySelector('nav').style.padding = '10px 0 0 0'; } } else{ if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50){ document.querySelector('nav').style.padding = '0'; } }

---

Quelqu'un saurait me dire d'où provient l'erreur ?

Cordialement

Bonjour,

1- Ton code :

Code:

---

1 2 3 4

if (window.innerWidth < 1300) && (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50){ ... } }

---

j'ai du mal à croire que ça fonctionne (même partiellement), alors que :

• il manque des parenthèses
• il y a 2 } au lieu d'un.

Ré-écrit avec un peu plus de logique :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

function navScroll() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { if ( window.innerWidth < 1300 ) { document.querySelector('nav').style.padding = '10px 0 0 0'; } else { document.querySelector('nav').style.padding = '0'; } } else { // ?? (il manque cette condition : menu "normal") } }

---

2- Au lieu de définir le style CSS dans le script JS, une meilleure solution est d'ajouter/supprimer une classe CSS.
voir :

• .classList (.classList.add / classList.remove)

On aurait alors simplement :

Code:

---

1 2 3 4 5 6 7 8

function navScroll() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { document.querySelector('nav').classList.add('menutop'); } else { document.querySelector('nav').classList.remove('menutop'); } }

---

Le CSS se gère alors dans le fichier CSS(!), avec media-queries (pour la largeur).

Code:

---

1 2 3 4

nav.menutop { padding:10px 0 0 0; } @media screen and (min-width:1300px) { nav.menutop { padding:0; } }

---

Merci je prends note de ces conseils avisés sur la manière de styliser via l'ajout/suppression de classes ;)