1

我试图在这里找到解决方案，但找不到。我正在处理这个响应式设计页面。在移动设备上，当您点击菜单时，主要内容 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;

}

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

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

提前致谢。

4

2 回答 2

0

由于您使用 javascript 来移动 div，因此您还需要使用 javascript 将其移回。您需要使用 window.onresize 侦听器来执行此操作。你可以使用类似这个答案的东西来实现这一点。

于 2017-01-09T21:35:20.777 回答
0

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

@media screen and (min-width: 801px) {
  #main {
    transform: translateX(0) !important;
  }
}
于 2017-01-09T21:53:04.177 回答