[R]scrollspy qui ne fonctione -presque- pas

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour (je suis nouveau ici !),

Je suis actuellement en train de faire une faq pour mon site et j’aime bien le framework Materialize Css. Seulement, le scrollpsy ne fonctionne que sur le premier item… voilà le lien du site et donc du code source actuel : https://kagescan.legtux.org/about/faq.html

Pourtant, je ne reçois aucune erreur dans la console, mon code passe très bien dans le validateur w3 enfin bref, tout semble OK à mon avis donc je ne sais pas vraiment d’où peut venir l’erreur… J’ai aussi demandé sur quelques serveurs discord (messagerie en ligne comme skype), rien trouvé.

Avez-vous une idée sur mon problème? Merci !!

Édité par LoganTann

Développeur du site https://kagescan.legtux.org/ et admin de la communauté francophone KageTeam[Fr]

+0 -0

Cette réponse a aidé l’auteur du sujet

Normalement quand tu mets ton code dans une balise à la fin de ton body ça minimise le problème de ressources non chargés. Mais tu devrais attendre que ta page soit complètement chargé, au mieux attend aussi que tes autres éléments (images, etc…) soit chargé aussi (surtout pour ta variable sticky).

1
document.addEventListener("load", function() { /* ton code */ });

La documentation de Materialize conseille, l’événement avant load : DOMContentLoaded.

La doc :


Ensuite ce n’est pas querySelector que tu veux faire mais :

1
const elem = document.getElementsByClassName('scrollspy');

ou

1
const elem = document.querySelectorAll('.scrollspy');

Pour récupérer TOUS les éléments et non le premier.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
      //scrollspy
          var elem = document.querySelector('.scrollspy');
          var instance = M.ScrollSpy.init(elem);
      //scrollpsy nav// When the user scrolls the page, execute myFunction
          window.onscroll = function() {myFunction()};
          var header = document.getElementById("nav"); // Get the header
          var sticky = header.offsetTop; // Get the offset position of the navbar
          function myFunction() {
            if (window.pageYOffset >= sticky) {header.classList.add("navig");}
            else {header.classList.remove("navig");}
          } 

Ensuite quelques points supplémentaire sur ton code :

  1. Normalement la façon correcte de définir ton trigger onscroll est d’utiliser addEventListener (ce n’est pas ça qui corrigera ton problème).

  2. Si tu n’utilise pas load la variable sticky doit être obligatoirement définit dans ton trigger scroll.

J’écrirai ainsi le code, comme ceci :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
document.addEventListener("DOMContentLoaded", function() { // ou "load" pour être tranquille
    const elem = document.getElementsByClassName('scrollspy'); // ou querySelectorAll
    const instance = M.ScrollSpy.init(elem);

    window.addEventListener("scroll", function() { // ou "onscroll" à vérifier ?
        const header = document.getElementById("nav");
        const sticky = header.offsetTop; // Get the offset position of the navbar
        if (sticky <= window.pageYOffset) {
            header.classList.add("navig");
        } else {
            header.classList.remove("navig");
        }
    });
});

La doc :

Édité par A-312

✈️ // 🐺 Ami des loups // 🎮 Coding Game // 🐤 Twitter @A312_zds // :B // L’hiver vient // @**A-312** pour me ping

+0 -0

(J’ai corrigé le titre du topic pour enlever le tag malformé, modifier scrollpsy -> scrollspy, et renommer le tag scrollpsy -> scrollspy. Si ça peut t’aider à retenir, spy signifie espion en anglais. Littéralement, tu veux espionner le scroll. Rien à voir avec un psy. ;) )

Édité par cepus

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+3 -0
Auteur du sujet

Bonjour, merci pour vos réponses -très- rapides et très complètes !! En effet, tout fonctionne maintenant ! et j’ai même un peu amélioré le code.

Sujet résolu !

Édité par LoganTann

Développeur du site https://kagescan.legtux.org/ et admin de la communauté francophone KageTeam[Fr]

+1 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte