我正在建立一个响应式网站，移动设备将在该网站上获得菜单按钮以查看菜单。按下此按钮时可以滚动，因此我使用overflow: hidden;和position: fixed;修复了该问题。
由于某种原因，该网站向右“跳转”，而我无法向后滚动。这是源代码：
<body>
<div id="header">
<div id="logo">
<a href=""><img src="images/logo.png" alt="logo"/></a>
</div>
<div class="menuToggle">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="nav">
<div class="aanmelden">
<a href="">Aanmelden</a>
</div>
<ul>
<li><a href="">Download app</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Over GYM2Go</a></li>
</ul>
</div>
</div>
</body>
和Javascript：
$(window).ready(function() {
menuToggle();
});
var down = false;
function menuToggle() {
var i = 0;
$('.menuToggle').on('click', function(){
$('.menuToggle').toggleClass('active');
$('#nav').toggleClass('active');
$('body').toggleClass('active');
if (down) {
$('.lastItem').remove();
down = false;
} else {
$("ul").append('<li class="lastItem"><a href="">Aanmelden</a></li>');
down = true;
}
});
$('#nav > ul > li').on('click', function(e) {
$('#nav > ul > li.active').removeClass('active');
$(this).addClass('active');
var childUl = $(this).find('ul');
$('#nav > ul > li > ul').each(function() {
if (!childUl.is($(this))) {
$(this).hide();
}
});
if (childUl.length > 0 && childUl.css('display') == 'none') {
e.preventDefault();
childUl.toggle();
}
});
};
和CSS：
body.active {
overflow: hidden;
position: fixed;
}
/* Menu */
@media screen and (max-width: 792px) {
.aanmelden {
display: none;
}
ul {
display: none;
}
.menuToggle {
display: block;
}
#nav {
margin: 0;
position: absolute;
top: 110px;
background: #e74a2b;
height: 100%;
width: 100%;
max-height: 0;
overflow: hidden;
-webkit-transition: width 0.3s; /* Safari */
transition:max-height 0.3s;
}
#nav.active {
max-height: calc(100% - 110px);
}
ul {
display: block;
z-index: 5;
position: relative;
width: 100%;
padding: 0;
margin: 0;
}
ul li {
float: left;
width: 100%;
border-bottom: 1px solid rgba(255,255,255,0.4);
}
ul li a:hover {
color: #2c2c2c;
}
ul li a {
float: left;
width: 100%;
color: white;
padding: 15px 20px;
}
}
最佳答案
因此，经过一番混乱之后，我发现这是解决我的问题的方法。
body.active {
overflow: hidden;
position: fixed;
top:0;
left:0;
}
这可能是因为
position: fixed;实际上需要固定位置。关于jquery - HTML位置固定错误屏幕向右，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42649128/