javascript - div 位置不会在响应式页面中重置

Question

我试图在这里找到解决方案，但找不到。我正在开发这个响应式设计页面。在移动设备上，当您点击菜单时，主要内容 div 会被推到一边(通过 Javascript)以显示下方的左侧固定菜单。一切都工作得很好，除了当您在计算机浏览器(用于模仿移动设备)上看到网页时，打开菜单，然后展开浏览器窗口直到它到达“桌面”断点，主要内容 div 仍然被推到一边。有没有办法在最大化到桌面断点时重置内容(主)div 的位置？我尝试了很多替代方案都无济于事。这是该页面的 jsfiddle 链接:https://jsfiddle.net/luchosoto/wad3pmn0/1/

主要内容 div 的 CSS:

#main {
top: 0;
bottom:0;
width: 100%;
position:fixed;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
z-index: 2;
transition: 500ms;
box-sizing: border-box;

}

Javascript 将主 div 推到一边以显示菜单:

var counter = 1;
function toggleNav() {

if (counter == 1){
    document.getElementById("main").style.transform = "translateX(60%)";
    counter = 0;
}else{
    document.getElementById("main").style.transform = "translateX(0%)";
    counter = 1;
}
}

提前致谢。

Answer 1

虽然 Zack Kirby 的回答听起来合乎逻辑，并且 ntgCleaner 的评论非常有用，但您还可以添加此 CSS，强制主 div 位置到您想要的位置:JSFiddle

@media screen and (min-width: 801px) {
  #main {
    transform: translateX(0) !important;
  }
}