移動菜單在滾動時消失（純 javascript）

Question

如果用於響應式移動菜單，我正在使用以下代碼。 問題在於調整大小事件。 在移動觸摸屏上滾動菜單時，菜單會消失。

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

}

Answer 1

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