javascript - 移动菜单在滚动时消失(纯 JavaScript)
问题描述
如果用于响应式移动菜单,我正在使用以下代码。问题在于调整大小事件。在移动触摸屏上滚动菜单时,菜单消失。
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
});
}
解决方案
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
您也可以使用 matchMedia 然后获取最大宽度 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_matchmedia
推荐阅读
- javascript - 根目录外的 webpack /src
- python - 从 API 响应解析 xml
- firebase - 即使使用合并选项,Firestore 也会覆盖数据
- javascript - 我怎样才能访问我知道动态键像树一样的对象
- python - 错误:'int' 对象没有属性 'lower' - 关于 CountVectorizer 和 Pandas
- arrays - 将数据分配给 char 数组
- spring - 如何将百里香值发送到弹簧控制器
- ios - IOS Swift - API fetch(能够在控制台日志中获取数据,但无法显示)
- javascript - 如何避免折叠菜单栏和覆盖网站中的轮播?
- unix - 有没有办法进入目录中的每个子目录并对具有特定扩展名的文件进行分析?