JavaScript最大宽度removeAttribute

Question

I have a problem with this code.

This code is checking the resolution of mobile device and open a web page with same resolution. But When I open a page from the mobile device with display width less than 480px and I scroll, the page is not viewed correctly. I want to drop this code for devices with display width less than 480px.

Can you help me?

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");
        }
    });
}

I dont want: 480px width id smaller to be added.

Answer 1

If I understand you correctly, you want this line of code: header.setAttribute("id","smaller"); to be only executed if the width is greater then 480px. If this is the case, try the following:

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");
        }
    });
}