18041 sujets

Questions générales et questions de débutants

[Résolu] Uncaught TypeError: can't access property "classList", nav is

Salut,

Je ne comprends pas. J’ai refait un tuto, que je pense exact à la virgule près, et j’ai ça comme résultat : (voir codenpen plus bas)
Voir la console, le message en rouge.

À priori, j’ai oublié quelque chose.

Merci de votre aide.

//EDIT : je précise que la navbar devrait se rétracter et réapparaître selon les mouvements de la souris.
Modifié par myself (15 May 2023 - 14:25)
Modérateur
Salut,

Ton Js execute le .querySelector(".nav") avant meme que ton DOM n'ai fini de charger donc il ne trouve pas ton élément (et tu ne refait pas de query une fois le DOM chargé.

Il faut mettre ton code dans un test de DOMContentLoaded ou equivalent j'ai plus en tete les différentes solution :

  document.addEventListener("DOMContentLoaded", (event) => {
    const nav = document.querySelector(".nav");
    let lastScrollY = window.scrollY;
    window.addEventListener("scroll", () => {
      if (lastScrollY < window.scrollY) {
        nav.classList.add("nav--hidden");
      } else {
        nav.classList.remove("nav--hidden");
      }
      lastScrollY = window.scrollY;
    });
  });


Bonne aprem

[EDIT] je sais plus si c'est window ou document qu'il vaut mieux mettre
Modifié par _laurent (14 May 2023 - 15:48)
Meilleure solution
Ah super, merci Laurent, en effet, le script de mon exemple avant été tapé en bas du body.

Merci à tous les aidants, à travers toi.
Modifié par myself (14 May 2023 - 19:18)
Re

Je vois que si on scrolle d’une pixel, ça fait apparaître une zone vide en haut de la fenêtre. C’est embêtant quand on remplace la fine navbar par un header plus haut.

Du coup, ma ligne devient :
       if (lastScrollY < window.scrollY && lastScrollY > 180) {


J’ai fait un codepen ici : https://codepen.io/vZgtErTghZdQdgZA/pen/eYPjLqK

Je voudrais utiliser une variable dans le JS (plutôt que 180), celle de la hauteur du header (déclaré dans le body), soit :
      height: var(--header-height);

J’ai fait des recherches, mais je n’arrive pas à l’implémenter correctement.

J’ai tenté avec ça : 
let headerHeight = body.style.getPropertyValue("--header-height");

Mais ce n’est pas ça.

Merci du coup de pouce.
Modifié par myself (15 May 2023 - 14:24)
Modérateur
Bonjour,

Pour récupérer le contenu de ta variable css --header-height :
let style = getComputedStyle(document.body);
let headerHeight = parseInt(style.getPropertyValue("--header-height"), 10);

Amicalement,
Prévenir un modérateur
Répondre au sujet
Aller à