Question

我有一个全屏导航（最小全屏，横向大于100vh）。我想实现的是，如果打开菜单，则只能在导航中滚动，但可以在正文中滚动。我尝试了许多不同的方法，但没有成功。我什至试图以动态方式获取导航器的高度，然后将主体的高度设置为隐藏oveflow的高度，甚至无法将文档滚动到视口之外。

html

<nav id="nav-bar">
    <div class="container">
        <div id="upper-nav">
            <a id="logo-wrapper" href="#">

            </a>
            <a id="menu-icon-wrapper" class="menu-icon" href="javascript:void(0)" onclick="toggleMenu()">

            </a>
        </div>
        <div id="lower-nav">
            <ul id="navigation">
                <!-- navigation items -->
            </ul>
        </div>
    </div>
</nav>
<div class="content">
</div>

CSS

#nav-bar{
    width:100%;
    background-color:#000000;
    color:#ffffff;
}

#upper-nav{
    display:flex;
    height:8rem;
}

.nav-bar-active{
    position:fixed;
    top:0;
    left:0;
    overflow-y:scroll;
}

#lower-nav{
    height:0;
    opacity:0;
    overflow:hidden;
    transition: .5s;
}

.nav-bar-active #lower-nav{
    min-height:calc(100vh - 8rem);
    overflow:auto;
    height:auto;
    opacity:1;
}

#navigation{
     padding:4rem 0;
}

.content{
    padding:500px 0;
}

JS

var navBar = document.getElementById("nav-bar");

function toggleMenu() {
    navBar.classList.toggle("nav-bar-active");
}

Answer 1

您可以通过向其添加overflow:hidden;来将其锁定在适当的位置。然后，您必须将导航的高度设置为calc（100vh-8em）-而不是最小高度。您还必须将overflow-y:scroll;设置为下导航元素。

我在触发元素中添加了红色，因此您可以实际看到它，我还添加了一个test-div，因此您可以看到lower-nav元素确实是可滚动的：）

var navBar = document.getElementById("nav-bar");
                function toggleMenu() {
                    navBar.classList.toggle("nav-bar-active");
                    document.body.classList.toggle("nav-bar-active");                    
                }

body.nav-bar-active {overflow:hidden;}
#nav-bar{
    width:100%;
    background-color:#000000;
    color:#ffffff;
}

#upper-nav{
    display:flex;
    height:8rem;
}

.nav-bar-active{
    position:fixed;
    top:0;
    left:0;
}

#lower-nav{
    height:0;
    opacity:0;
    overflow:hidden;
    transition: .5s;
}

.nav-bar-active #lower-nav{
    height:calc(100vh - 8rem);   
    overflow-y:scroll;
    opacity:1;
}

#navigation{
     padding:4rem 0;
}
.test {
    height: 800px;
}
.content{
    padding:500px 0;
}

        <body>
            <nav id="nav-bar">
                <div class="container">
                    <div id="upper-nav">
                        <a id="logo-wrapper" href="#">
            
                        </a>
                        <a id="menu-icon-wrapper" class="menu-icon" onclick="toggleMenu()" style="background:red;height:50px;width:50px;">
            
                        </a>
                    </div>
                    <div id="lower-nav">
                           <div class="test"></div>                        
                    </div>
                </div>
            </nav>
            <div class="content">
            </div>



</body>

如果导航超过100vh

1 个答案: