Html css：左导航滚动

左侧面板和主要内容应分别滚动

下面是小提琴

下面是css

html {
overflow-y: scroll;
}


body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: Arial;
font-size: 18px;
position:fixed;
overflow-y:auto;
}


header {
background-color: #3b5998;
padding: 10px;
text-decoration: none;
position: fixed;
width: 100%;
z-index: 1;
-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}


 #content {
background-color: #FFFFFF;
padding: 52px 10px 10px 10px;
position: relative;
width: auto;
height: 100%;
-webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
overflow-y:auto;
 }

 #hamburger {
border: 1px solid #374C77;
border-radius: 3px 3px 3px 3px;
cursor: pointer;
display: block;
height: 24px;
padding: 3px 4px 3px;
position: relative;
width: 25px;
background: #4569b2;
background: -moz-linear-gradient(top, #4569b2 0%, #4062a5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4569b2), color-stop(100%, #4062a5));
background: -webkit-linear-gradient(top, #4569b2 0%, #4062a5 100%);
background: -o-linear-gradient(top, #4569b2 0%, #4062a5 100%);
background: -ms-linear-gradient(top, #4569b2 0%, #4062a5 100%);
background: linear-gradient(to bottom, #4569b2 0%, #4062a5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4569b2', endColorstr='#4062a5', GradientType=0);
 }

#hamburger div {
background-color: #fff;
border: 1px solid #eee;
border-radius: 2px 2px 2px 2px;
height: 2px;
margin-top: 3px;
width: 90%;
 }


nav {
opacity: 0;
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
width: 70%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
background: #3e3c3d;
background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3c3d), color-stop(100%, #2d2c2d));
background: -webkit-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -o-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -ms-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: linear-gradient(to bottom, #3e3c3d 0%, #2d2c2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e3c3d', endColorstr='#2d2c2d', GradientType=0);
}

---

主要内容一点也不动人。左侧面板和主要内容应独立移动

只需从正文中删除此行即可

position:fixed;

再次编辑

使收割台的位置相对

position:relative;

---

如果我这样做了，那么在滚动菜单正文时，也会滚动删除正文和标题中的固定位置后，左侧导航菜单完全没有打开，再次编辑，请立即选中左侧面板，主内容应独立移动。如果我们向左滚动导航菜单，身体也在移动，对我来说很好。向下拖动左侧菜单时，菜单将保持静止。当您滑下主体时，左侧菜单将保持在原来的位置。在这里你可以看到