function openNav() {
document.getElementById('UI').className = "open";
}
function closeNav() {
document.getElementById('UI').className = "closed";
}body {
font-family: monospace;
padding: 75px;
word-wrap: break-word;
}
#UI {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .5s;
}
#UI.closed {
background-color: rgba(255,255,.0);
}
#UI.open {
background-color: rgba(05,55,105,.75);
}
#UI button {
font-size: 30;
width: 50px;
height: 50px;
border: 0;
outline: 0;
color: white;
background-color: blue;
transition: all .5s;
cursor: pointer;
position: fixed;
}
#UI button:hover {
background-color: white;
color: blue;
Box-shadow: 0px 0px 15px blue;
}
#openNavBtn {
top: 5px;
}
#topBtn {
top: 5px;
right: 5px;
}
#nav {
position: fixed;
top: 0;
width: 300px;
height: 100%;
background-color: blue;
transition: all .5s;
}
#closeNavBtn {
position: fixed;
left: -50px;
}
#UI.closed #openNavBtn {
left: 5px;
}
#UI.closed #topBtn {
right: 5px;
}
#UI.closed #nav {
left: -300px;
Box-shadow: 0px 0px 15px black;
}
#UI.closed #closeNavBtn {
left: -50px;
}
#UI.open #openNavBtn {
left: -55px;
}
#UI.open #topBtn {
right: -55px;
}
#UI.open #nav {
left: 0;
Box-shadow: 0px 0px 15px black;
}
#UI.open #closeNavBtn {
left: 250px;
}使用当前代码,当导航打开时,正文滚动 – 我该如何防止这种情况？
附：请原谅我的聚类编码风格.如果有人对如何保持清洁有任何建议,请分享.
P.P.S.我已经问了整个问题,但它说我需要更多细节.将来我该怎样避免这种情况？
