Charger JavaScript selon taille de l'écran

Bonjour, j'essaie de charger mon script en fonction des écrans mais ça ne fonctionne pas correctement. Pour l'écran d'ordi ça ne marche pas, pour les tablettes et les smartphones, ça marche, mais au début l'écran tremble. Quelqu'un pourra-t-il m'aider s'il vous plaît ?

D'avance merci !

voici le code :

/* début fixation ménu */

let entete = document.getElementById('entete');
let entete2 = document.getElementById('entete2');

if ( window.matchMedia("(min-width: 992px)").matches ) {
window.onscroll = function(){
if (window.pageYOffset > 68) {
entete.style.display = 'none';
entete2.style.display = 'block';
entete2.style.position = 'fixed';
entete2.style.top = 0;
} else {
entete.style.display = 'block';
entete2.style.display = 'none';
entete.style.display = 'block';
}
}
}

if ( window.matchMedia("(min-width: 768px)").matches ) {
window.onscroll = function(){
if (window.scrollY > 78) {
entete.style.position = 'fixed';
entete.style.top = 0;
} else {
entete.style.position = 'initial';
entete.style.top = 'initial';
}
}

}

if ( window.matchMedia("(max-width: 767.98px)").matches ) {
window.onscroll = function(){
if (window.scrollY > 58) {
entete.style.position = 'fixed';
entete.style.top = 0;
} else {
entete.style.position = 'initial';
entete.style.top = 'initial';
}
}

}


/* fin fixation ménu */

Bonjour GrabliMuk

Si tu fais :

if ( window.matchMedia("(min-width: 992px)").matches ) {
   console.log("(min-width: 992px)");
}
if ( window.matchMedia("(min-width: 768px)").matches ) {
console.log("(min-width: 768px)");
}
if ( window.matchMedia("(max-width: 767.98px)").matches ) {
console.log("(max-width: 767.98px)");
}

tu passes dans

d'abord dans (min-width: 992px)
puis dans (min-width: 768px)

dans quelle mediaquery dois tu passer pour l'écran d'ordi?
Modifié par aliasdmc (30 Mar 2019 - 19:35)