Discussion :

[Mojitow]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Invité]

Bonjour,

1- Ton code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Mojitow]

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