JavaScript max-width removeAttribute

Question

J'ai un problème avec ce code.

Ce code vérifie la résolution du dispositif mobile et d'ouvrir une page Web avec la même résolution. Mais lorsque j'ouvre une page de l'appareil mobile avec une largeur d'affichage inférieure à 480px et que je défile, la page n'est pas visualisée correctement. Je souhaite supprimer ce code pour les périphériques dont la largeur d'affichage est inférieure à 480px.

Pouvez-vous m'aider?

JavaScript

function init() { 
    window.addEventListener('scroll', function(e){ 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
      shrinkOn = 200, 
      header = document.querySelector("nav"); 
     if (distanceY > shrinkOn) { 
      header.setAttribute("id","smaller"); 
     } else { 
      header.removeAttribute("id","smaller"); 
     } 
    }); 
} 

Je ne veux pas que: 480px largeur id smaller à ajouter.

Answer 1

Si je vous comprends bien, vous voulez que cette ligne de code: header.setAttribute ("id", "petit"); pour être exécuté uniquement si la largeur est supérieure à 480px. Si tel est le cas, essayez ce qui suit:

var width = document.body.clientWidth; 

function init() { 
    window.addEventListener('scroll', function(e){ 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
      shrinkOn = 200, 
      header = document.querySelector("nav"); 
     if (distanceY > shrinkOn) { 
      if (width > 480) { 
      header.setAttribute("id","smaller"); 
      }   
     } else { 
      header.removeAttribute("id","smaller"); 
     } 
    }); 
}