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).
| 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 :
| const elem = document.getElementsByClassName('scrollspy');
|
ou
| const elem = document.querySelectorAll('.scrollspy');
|
Pour récupérer TOUS les éléments et non le premier.
| //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 :
-
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).
-
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 :
)