我正在尝试创建一个＆＃34;离开画布的导航＆＃34;对于我的页面。当导航打开时，我希望身体内容不可滚动，但我仍然希望能够在导航菜单中滚动，如果它超出可见区域。
我还希望当菜单打开时，正文内容保持在相同的位置（当我打开菜单时，我找到了一个让我向正文添加position:fixed的解决方案，但这会导致页面滚动回到顶部）。
$(function() {
$('.menu-toggle').click(function() {
$('body').toggleClass('menu-open');
});
});body.menu-open {
overflow:hidden; /* this does not prevent scrolling in mobile safari */
}
.menu-toggle {
font-size:40px;
cursor:pointer;
}
nav {
background:#fff;
width:100%;
position:absolute;
left:-100%;
}
.menu-open nav {
left:0;
}
nav ul {
margin:0;
padding:0;
list-style-type:none;
}
nav ul li {
padding:20px 0 20px 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<header>
<span class="menu-toggle">=</span>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
</nav>
</header>
<div class="body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna sollicitudin, tincidunt nisl sed, eleifend diam. Maecenas venenatis semper mauris. In faucibus congue sapien, ultrices efficitur ante pulvinar id. Duis eget egestas sem. Nullam tincidunt purus ut molestie dignissim. Nunc dictum elit arcu. Curabitur vitae magna tortor. Proin lacinia, nisi sit amet gravida pellentesque, orci neque tempor nunc, sit amet lobortis magna nulla id lorem.
Etiam suscipit massa ut diam sollicitudin fringilla ac ac mauris. Vestibulum pretium semper urna. Nulla risus nibh, sollicitudin eget volutpat sit amet, fermentum non enim. Praesent gravida metus in leo pharetra congue. Maecenas augue purus, malesuada tempor venenatis at, maximus at elit. Phasellus ipsum nunc, posuere eu metus in, mattis imperdiet sem. Duis non ultrices mi. Mauris nibh ex, varius vel ipsum vel, fermentum semper tellus. Integer fringilla fringilla pharetra. Vivamus eleifend rhoncus mi at iaculis. Proin suscipit lorem justo. Nulla mauris libero, dapibus a augue et, varius mollis nulla. Etiam iaculis convallis quam. Nulla semper urna vel turpis blandit, in fermentum nunc lobortis. Ut varius dui ac enim fringilla condimentum.
Vivamus in condimentum leo. In ullamcorper lacus quam, elementum dictum elit scelerisque non. Pellentesque commodo augue imperdiet, consequat ipsum ut, ultrices libero. Sed non suscipit nisl. Nam tristique vel ante in condimentum. Morbi et sem pharetra, lacinia eros id, pulvinar enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum ipsum ac scelerisque hendrerit. Ut tellus eros, aliquet sit amet aliquam et, rhoncus a eros.
Donec ut felis ex. Maecenas lobortis risus lacus, vitae vestibulum magna malesuada sit amet. Integer et magna pharetra, egestas lacus non, pretium nisl. Aenean malesuada urna et neque tincidunt tincidunt. In orci ligula, efficitur ut sagittis eget, vestibulum a leo. Phasellus convallis risus et elit sodales, vel sollicitudin arcu elementum. Nulla pretium orci sed aliquet feugiat. Fusce consequat pretium aliquet. Pellentesque dapibus placerat euismod. Aenean eget orci eget enim vestibulum interdum. Donec non enim vel lorem dapibus rhoncus sit amet vel risus. Nulla venenatis egestas mauris, et congue lectus. Etiam ac tristique risus.
Aliquam quis pretium nunc. Sed blandit hendrerit lacus, sit amet posuere velit sodales in. Praesent dapibus viverra turpis. Nam auctor volutpat urna, luctus venenatis nulla venenatis eu. Quisque quis purus vitae lorem blandit elementum a dapibus enim. Donec commodo lectus nec ante pulvinar fermentum. Etiam sodales ex sit amet dolor finibus suscipit. Maecenas luctus placerat congue. Morbi eget viverra lacus. Vivamus ultricies augue at tincidunt luctus. Maecenas vel pretium purus, in egestas nisi.
</div>
</body>
</html>
答案 0 :(得分：7)
由于您在div上有内容，因此可以在菜单打开时将其隐藏
这是一个工作示例
$(function() {
$('.menu-toggle').click(function() {
$('body').toggleClass('menu-open');
});
});.menu-open .body-content {
/* Hide content when menu is open */
height: 0;
overflow: hidden;
}
.menu-toggle {
font-size: 40px;
cursor: pointer;
}
nav {
background: #fff;
width: 100%;
position: absolute;
left: -100%;
}
.menu-open nav {
left: 0;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav ul li {
padding: 20px 0 20px 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<span class="menu-toggle">=</span>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
</nav>
</header>
<div class="body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna sollicitudin, tincidunt nisl sed, eleifend diam. Maecenas venenatis semper mauris. In faucibus congue sapien, ultrices efficitur ante pulvinar id. Duis eget egestas sem. Nullam tincidunt
purus ut molestie dignissim. Nunc dictum elit arcu. Curabitur vitae magna tortor. Proin lacinia, nisi sit amet gravida pellentesque, orci neque tempor nunc, sit amet lobortis magna nulla id lorem. Etiam suscipit massa ut diam sollicitudin fringilla
ac ac mauris. Vestibulum pretium semper urna. Nulla risus nibh, sollicitudin eget volutpat sit amet, fermentum non enim. Praesent gravida metus in leo pharetra congue. Maecenas augue purus, malesuada tempor venenatis at, maximus at elit. Phasellus ipsum
nunc, posuere eu metus in, mattis imperdiet sem. Duis non ultrices mi. Mauris nibh ex, varius vel ipsum vel, fermentum semper tellus. Integer fringilla fringilla pharetra. Vivamus eleifend rhoncus mi at iaculis. Proin suscipit lorem justo. Nulla mauris
libero, dapibus a augue et, varius mollis nulla. Etiam iaculis convallis quam. Nulla semper urna vel turpis blandit, in fermentum nunc lobortis. Ut varius dui ac enim fringilla condimentum. Vivamus in condimentum leo. In ullamcorper lacus quam, elementum
dictum elit scelerisque non. Pellentesque commodo augue imperdiet, consequat ipsum ut, ultrices libero. Sed non suscipit nisl. Nam tristique vel ante in condimentum. Morbi et sem pharetra, lacinia eros id, pulvinar enim. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Suspendisse elementum ipsum ac scelerisque hendrerit. Ut tellus eros, aliquet sit amet aliquam et, rhoncus a eros. Donec ut felis ex. Maecenas lobortis risus lacus, vitae vestibulum magna malesuada sit amet. Integer et magna
pharetra, egestas lacus non, pretium nisl. Aenean malesuada urna et neque tincidunt tincidunt. In orci ligula, efficitur ut sagittis eget, vestibulum a leo. Phasellus convallis risus et elit sodales, vel sollicitudin arcu elementum. Nulla pretium orci
sed aliquet feugiat. Fusce consequat pretium aliquet. Pellentesque dapibus placerat euismod. Aenean eget orci eget enim vestibulum interdum. Donec non enim vel lorem dapibus rhoncus sit amet vel risus. Nulla venenatis egestas mauris, et congue lectus.
Etiam ac tristique risus. Aliquam quis pretium nunc. Sed blandit hendrerit lacus, sit amet posuere velit sodales in. Praesent dapibus viverra turpis. Nam auctor volutpat urna, luctus venenatis nulla venenatis eu. Quisque quis purus vitae lorem blandit
elementum a dapibus enim. Donec commodo lectus nec ante pulvinar fermentum. Etiam sodales ex sit amet dolor finibus suscipit. Maecenas luctus placerat congue. Morbi eget viverra lacus. Vivamus ultricies augue at tincidunt luctus. Maecenas vel pretium
purus, in egestas nisi.
</div>
答案 1 :(得分：4)
当您触发打开按钮时，您可以让JavaScript禁用正文滚动并在菜单上启用它。当菜单关闭时，相反的方式可以触发，重新启用身体上的滚动。
打开菜单：
$(".body-content").css({ overflow: "hidden" });
关闭菜单：
$(".body-content").css({ overflow: "auto" });
答案 2 :(得分：3)
只需将其添加到css
即可.menu-open header nav {
height: 100vh;
overflow: auto;
}
这将导航到100％并启用滚动到它。 如果您希望它仅在移动设备中为100％高度，请将其放入@media查询
答案 3 :(得分：3)
对于我的网站，以下工作只是找到。但是，重要的是要注意不要使用此方法为body设置高度 - 例如height: 100%没有body.menu-open，否则每次打开导航时它都会跳转到顶部。
body.menu-open{
overflow: hidden;
}
.menu-open nav{
overflow: auto;
}
然后当然记住你的其他风格：）
答案 4 :(得分：3)
我不确定这是否是您想要的，但我将您的导航设置为“＃34;已修复＆＃34;在屏幕顶部，只是在导航上添加了一些jQuery，滚动到页面中的不同部分。
$(function () {
$('.menu-toggle').on('click touch',function () {
$('body').toggleClass('menu-open');
});
$('nav li').on('click touch',function () {
var id = $(this).attr("id");
var temp = id.split("_");
id = temp[1];
$('html, body').animate({
scrollTop: $('#' + id).offset().top
}, 500);
$('body').toggleClass('menu-open');
});
}); header {
position: fixed !important;
z-index: 10;
background-color: #FFF;
display: block;
width:100%;
top:0px;
}
.body-content{
}
body.menu-open {
overflow: hidden; /* this does not prevent scrolling in mobile safari */
}
.menu-toggle {
font-size: 40px;
cursor: pointer;
}
nav {
background: #fff;
width: 100%;
position: fixed;
left: -100%;
}
.menu-open nav {
left: 0;
overflow-y:scroll;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav ul li {
padding: 20px 0 20px 10px;
}
.body-content {
padding-top:20px;
position:relative;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header>
<span class="menu-toggle">=</span>
<nav>
<ul>
<li id="to_loc1">Link 1</li>
<li id="to_loc2">Link 2</li>
<li id="to_loc3">Link 3</li>
<li id="to_loc4">Link 4</li>
<li id="to_loc5">Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
</nav>
</header>
<div class="body-content">
<div id="loc1"><h1>Section 1 </h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna sollicitudin, tincidunt nisl sed, eleifend diam. Maecenas venenatis semper mauris. In faucibus congue sapien, ultrices efficitur ante pulvinar id. Duis eget egestas sem. Nullam tincidunt purus ut molestie dignissim. Nunc dictum elit arcu. Curabitur vitae magna tortor. Proin lacinia, nisi sit amet gravida pellentesque, orci neque tempor nunc, sit amet lobortis magna nulla id lorem.</div>
<div id="loc2"><h1>Section 2 </h1>Etiam suscipit massa ut diam sollicitudin fringilla ac ac mauris. Vestibulum pretium semper urna. Nulla risus nibh, sollicitudin eget volutpat sit amet, fermentum non enim. Praesent gravida metus in leo pharetra congue. Maecenas augue purus, malesuada tempor venenatis at, maximus at elit. Phasellus ipsum nunc, posuere eu metus in, mattis imperdiet sem. Duis non ultrices mi. Mauris nibh ex, varius vel ipsum vel, fermentum semper tellus. Integer fringilla fringilla pharetra. Vivamus eleifend rhoncus mi at iaculis. Proin suscipit lorem justo. Nulla mauris libero, dapibus a augue et, varius mollis nulla. Etiam iaculis convallis quam. Nulla semper urna vel turpis blandit, in fermentum nunc lobortis. Ut varius dui ac enim fringilla condimentum.</div>
<div id="loc3"><h1>Section 3 </h1>Vivamus in condimentum leo. In ullamcorper lacus quam, elementum dictum elit scelerisque non. Pellentesque commodo augue imperdiet, consequat ipsum ut, ultrices libero. Sed non suscipit nisl. Nam tristique vel ante in condimentum. Morbi et sem pharetra, lacinia eros id, pulvinar enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum ipsum ac scelerisque hendrerit. Ut tellus eros, aliquet sit amet aliquam et, rhoncus a eros.</div>
<div id="loc4"><h1>Section 4 </h1>Donec ut felis ex. Maecenas lobortis risus lacus, vitae vestibulum magna malesuada sit amet. Integer et magna pharetra, egestas lacus non, pretium nisl. Aenean malesuada urna et neque tincidunt tincidunt. In orci ligula, efficitur ut sagittis eget, vestibulum a leo. Phasellus convallis risus et elit sodales, vel sollicitudin arcu elementum. Nulla pretium orci sed aliquet feugiat. Fusce consequat pretium aliquet. Pellentesque dapibus placerat euismod. Aenean eget orci eget enim vestibulum interdum. Donec non enim vel lorem dapibus rhoncus sit amet vel risus. Nulla venenatis egestas mauris, et congue lectus. Etiam ac tristique risus.</div>
<div id="loc5"><h1>Section 5 </h1>Aliquam quis pretium nunc. Sed blandit hendrerit lacus, sit amet posuere velit sodales in. Praesent dapibus viverra turpis. Nam auctor volutpat urna, luctus venenatis nulla venenatis eu. Quisque quis purus vitae lorem blandit elementum a dapibus enim. Donec commodo lectus nec ante pulvinar fermentum. Etiam sodales ex sit amet dolor finibus suscipit. Maecenas luctus placerat congue. Morbi eget viverra lacus. Vivamus ultricies augue at tincidunt luctus. Maecenas vel pretium purus, in egestas nisi.</div>
</div>
</body>
</html>
答案 5 :(得分：0)
所以这是经过几次尝试后我能想出的最佳方法。
当导航打开时，您可以使用 jQuery body-content隐藏toggle()，因此当它hide和{{ 1}}，它的位置不会改变。
请务必在show中设置overflow-y: scroll;，以便导航可以滚动。
以下是代码：
body.menu-open $(function () {
$('.menu-toggle').click(function () {
$('body').toggleClass('menu-open');
$('.body-content').toggle();
});
}); body.menu-open {
overflow-y: scroll;
/* this does not prevent scrolling in mobile safari */
}
.menu-toggle {
font-size: 40px;
cursor: pointer;
}
nav {
background: #fff;
width: 100%;
position: absolute;
left: -100%;
}
.menu-open nav {
left: 0;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav ul li {
padding: 20px 0 20px 10px;
}