CODEWITHSUNDEEP
htmlcssnavigation
Daniel Kormos
Daniel Kormos

Reputation: 290

disable scroll on body and enable scrolling in navigation if nav is more than 100vh

I have a full screen navigation ( minimum fullscreen, in landscape it is more than 100vh ). I would like to achieve, that if you open the menu, you would be able to scroll only in the navigation, but the body. I have tried many different approach, with no success. I even tried to get the nav's height dinamically and then set body's height to that with oveflow hidden, and could not scroll the document even out of the viewport.

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

Upvotes: 0

Views: 2933

Answers (1)

yinken
yinken

Reputation: 423

You can lock the body in place by adding overflow:hidden; to it. You will then have to set the height of your navigation to calc(100vh - 8em) - not the min-height. You will also have to set overflow-y:scroll; to your lower-nav element.

I added the red color to your toggling element, so you can actually see it, I also added a test-div so you can see that the lower-nav element is indeed scrollable :)

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>

Upvotes: 1

Related Questions