0
編輯：用戶在另一個網站上解決的問題。我總結這是一個單獨的答案。響應式菜單的子菜單在屏幕外流動時不會強制滾動
=====
編輯：我已經嘗試了各種導航溢出設置，但仍然一無所獲。這一定很簡單，但我找不到它。任何人？
=====
我有一個負責任的菜單中達到更大的窗口頁面的頂部時是粘性的，但顯示的漢堡包時固定在頂部永久。菜單是使用託德格言的flaunt.js菜單：https://toddmotto.com/labs/flaunt-js/
在原始演示（上面）菜單是不固定。更改CSS以使菜單固定具有防止菜單滾動的不幸效果。
我想阻止背後的身體滾動，我可以使用jQuery toggleClass成功完成，但需要使菜單滾動，因爲它通常會在較小的設備上以漢堡模式在屏幕外延伸。
我已經嘗試添加overflow-y：滾動到菜單結構的各個部分;這會創建滾動軌道，但即使菜單延伸到屏幕外，內部也沒有滾動條，也不會滾動。默認風格相對，到位置：
問題從位置改變時導航的位置在CSS類.nav發生固定與媒體查詢（最大寬度：768px）。
有沒有一種方法可以使菜單滾動，理想情況下與主瀏覽器的滾動條（身體不滾動後面）？
我JS防止身體滾動，並可能實現菜單滾動，同時增加覆蓋在身上，就是：
$(document).ready(function(){
$(".nav-mobile").click(function() {
$("#overlay").toggle();
$("#mybody").toggleClass("scroll no-scroll");
$("#SomeIDinTheNavSomewhere").toggleClass("scroll no-scroll");
});
});
與CSS：
#overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(40,40,40, .75);
}
.no-scroll {
overflow-y: scroll;
position: fixed;
}
.scroll {
overflow-y: scroll;
}
我選擇保持滾動軌道以避免由於啓用/禁用身體滾動而切換時切換漢堡而不是使用溢出：隱藏，但兩個cr無論如何，都會出現同樣的不良行爲。
flaunt.js菜單的html，css和js的裁剪和最小版本如下。
的jsfiddle 位置：在這裏固定：https://jsfiddle.net/m_d_a/6gtjpvck/1/
jsiddle 位置：相對這裏：https://jsfiddle.net/m_d_a/6gtjpvck/不用擔心佈局，只是爲了證明時.nav不存在固定的滾動。
HTML
<nav class="nav">
<ul class="nav-list">
<li class="nav-item">
<a href="?=home">Home</a>
<ul class="nav-submenu">
<li class="nav-submenu-item">
<a href="?=submenu-1">Submenu item 1</a>
</li>
<li class="nav-submenu-item">
<a href="?=submenu-2">Submenu item 2</a>
</li>
<li class="nav-submenu-item">
<a href="?=submenu-3">Submenu item 3</a>
</li>
<li class="nav-submenu-item">
<a href="?=submenu-4">Submenu item 4</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="?=about">About</a>
</li>
<li class="nav-item">
<a href="?=services">Services</a>
<ul class="nav-submenu">
<li class="nav-submenu-item">
<a href="?=submenu-1">Submenu item 1</a>
</li>
<li class="nav-submenu-item">
<a href="?=submenu-2">Submenu item 2</a>
</li>
<li class="nav-submenu-item">
<a href="?=submenu-3">Submenu item 3</a>
</li>
<li class="nav-submenu-item">
<a href="?=submenu-4">Submenu item 4</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="?=portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a href="?=testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a href="?=contact">Contact</a>
</li>
</ul>
</nav>
CSS
a, a:hover {
text-decoration:none;
}
ul, ol {
list-style:none;
}
.nav {
position:relative;
display:inline-block;
font-size:14px;
font-weight:900;
}
.nav-list {
text-align:left;
}
.nav-item {
float:left;
*display:inline;
zoom:1;
position:relative;
}
.nav-item a {
display:block;
color:#FFF;
padding:15px 20px;
background:#7A1E61;
border-bottom:1px solid #8B2870;
}
.nav-item > a:hover {
background:#822368;
}
.nav-item:hover .nav-submenu {
display:block;
}
.nav-submenu {
display:none;
position:absolute;
left:0;
width:180px;
}
.nav-submenu-item a {
background:#8B2770;
border-bottom:1px solid #9A337E;
display:block;
padding:15px;
}
.nav-submenu-item a:hover {
background:#932C77;
}
.nav-mobile {
display:none; /* Hide from browsers that don't support media queries */
cursor:pointer;
position:fixed;
top:0;
right:0;
background:#3D3D3B;
background-size:18px;
height:50px;
width:50px;
}
.nav-click {
position:absolute;
top:0;
right:0;
display:none;
border-left:1px solid #8B2870;
height:49px;
width:50px;
cursor:pointer;
}
.nav-click i {
display:block;
height:48px;
width:48px;
background:url(https://toddmotto.com/labs/flaunt-js/img/drop.svg) no-repeat center center;
background-size:20px;
}
.nav-click:hover {
background-color:#6E1656;
}
.nav-rotate {
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
/*-----------*\
Media Queries
\*-----------*/
@media only screen and (min-width: 320px) and (max-width: 768px) {
.nav-mobile {
display:block;
position: fixed;
}
.nav {
width:100%;
padding:50px 0 0;
}
.nav-list {
display:none;
}
.nav-item {
width:100%;
float:none;
}
.nav-item > a {
padding:15px;
}
.nav-click {
display:block;
}
.nav-mobile-open {
border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
}
.nav-item:hover .nav-submenu {
display:none;
}
.nav-submenu {
position:static;
width:100%;
}
}
JS
;(function($) {
// DOM ready
$(function() {
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
// Click to reveal the nav
$('.nav-mobile').click(function(){
$('.nav-list').toggle();
});
// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){
// Toggle the nested nav
$(this).siblings('.nav-submenu').toggle();
// Toggle the arrow using CSS3 transforms
$(this).children('.nav-arrow').toggleClass('nav-rotate');
});
});
})(jQuery);
謝謝。我意識到可能有一點需要在這裏通過。