响应菜单的子菜单在屏幕外流动时不强迫滚动

Question

编辑:由另一个站点上的用户解决的问题。我将此作为一个单独的答案加以总结。

=====

编辑:我已经尝试了各种溢出设置的导航，但仍然没有。这一定很简单，但我找不到。有没有人？

=====

我有一个响应菜单，当到达页面顶部的大窗口时是粘性的，但在显示汉堡包时永久固定在顶部。菜单使用的是托德座右铭的flaunt.js菜单：https://toddmotto.com/labs/flaunt-js/

在最初的演示(上面)中，菜单不是固定的。更改CSS使菜单固定，会产生防止菜单滚动的不幸效果。

我想防止身体向后滚动，我可以用jQuery toggleClass成功地做到这一点，但需要使菜单滚动，因为它通常会在较小的设备上扩展到屏幕外的汉堡包模式。

我尝试过向菜单结构的各个部分添加overflow:滚动；这会创建滚动轨道，但是即使菜单在屏幕外扩展，也没有滚动条。

当将导航器在CSS类.nav中的位置从默认样式中的位置:相对位置更改为位置:使用媒体查询的固定(最大宽度:768 in )时，就会出现问题。

是否有一种使菜单滚动的方法，最好是使用主浏览器的滚动条(主体不滚动)？

我的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;
}

我选择保持滚动轨道，以避免汉堡边跳，当切换时，由于启用/禁用身体滚动，而不是使用溢出:隐藏，但无论如何，两者都创造了相同的不想要的行为。

下面是flaunt.js菜单的html、css和js的精简和最小版本。

弹琴位置:固定在这里：a/6gtjpvck/1/

jsiddle位置:相对于这里：a/6gtjpvck/不担心布局，只是为了证明滚动时.nav是不固定的。

<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);

谢谢。我意识到这里可能会有些困难。

Answer 1

感谢另一个站点的用户，我遇到的问题是因为我没有为导航指定一个高度。

若要使滚动条处理溢出，必须设置高度。

max-height: calc(100% - 50px);
overflow-y: auto;

这样滚动条就可以工作了。然而，由于我希望主窗口有滚动条，我将删除实际的导航从位置:修复；被嵌入到一个全屏覆盖。撇开这一点不说，上面的CSS解决了问题并回答了所问的问题。