移动菜单在滚动时消失(纯javascript)
我正在使用下面的代码,如果用于响应移动菜单。问题在于调整大小事件。在移动触摸屏上滚动菜单时,菜单消失移动菜单在滚动时消失(纯javascript),javascript,Javascript,我正在使用下面的代码,如果用于响应移动菜单。问题在于调整大小事件。在移动触摸屏上滚动菜单时,菜单消失 if (document.getElementById("burger-check")) { var viewportWidth = window.innerWidth || document.documentElement.clientWidth; if (viewportWidth > 768) { document.getElementById("burger-check"
if (document.getElementById("burger-check")) {
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
if (viewportWidth > 768) {
document.getElementById("burger-check").checked = true;
} else {
document.getElementById("burger-check").checked = false;
}
window.addEventListener('resize', function () {
viewportWidth = window.innerWidth || document.documentElement.clientWidth;
if (viewportWidth > 768) {
document.getElementById("burger-check").checked = true;
} else {
document.getElementById("burger-check").checked = false;
}
}, {
passive: false
});
}
您也可以使用matchMedia,然后获得最大宽度
function myFunction(x) {
if (x.matches) { // If media query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addEventListener("change", myFunction) // Attach listener function on state changes