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;

}

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



function toggleMenu() {

    navBar.classList.toggle("nav-bar-active");

}

asked Nov 24 '18 at 2:19

Daniel Kormos

707

add a comment |

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;

}

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



function toggleMenu() {

    navBar.classList.toggle("nav-bar-active");

}

asked Nov 24 '18 at 2:19

Daniel Kormos

707

add a comment |

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;

}

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



function toggleMenu() {

    navBar.classList.toggle("nav-bar-active");

}

asked Nov 24 '18 at 2:19

Daniel Kormos

707

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;

}

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



function toggleMenu() {

    navBar.classList.toggle("nav-bar-active");

}

html css navigation

asked Nov 24 '18 at 2:19

Daniel Kormos

707

asked Nov 24 '18 at 2:19

Daniel Kormos

707

asked Nov 24 '18 at 2:19

Daniel Kormos

707

asked Nov 24 '18 at 2:19

Daniel Kormos

707

asked Nov 24 '18 at 2:19

Daniel Kormos

707

add a comment |

1 Answer
1

active

oldest

votes

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>

answered Nov 24 '18 at 19:56

yinken

24328

works like a charm, and got the point. Thank You

– Daniel Kormos
Nov 24 '18 at 22:00

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454645%2fdisable-scroll-on-body-and-enable-scrolling-in-navigation-if-nav-is-more-than-10%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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>

answered Nov 24 '18 at 19:56

yinken

24328

works like a charm, and got the point. Thank You

– Daniel Kormos
Nov 24 '18 at 22:00

add a comment |

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>

answered Nov 24 '18 at 19:56

yinken

24328

works like a charm, and got the point. Thank You

– Daniel Kormos
Nov 24 '18 at 22:00

add a comment |

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>

answered Nov 24 '18 at 19:56

yinken

24328

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>

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>

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>

answered Nov 24 '18 at 19:56

yinken

24328

answered Nov 24 '18 at 19:56

yinken

24328

answered Nov 24 '18 at 19:56

yinken

24328

answered Nov 24 '18 at 19:56

yinken

24328

works like a charm, and got the point. Thank You

– Daniel Kormos
Nov 24 '18 at 22:00

add a comment |

works like a charm, and got the point. Thank You

– Daniel Kormos
Nov 24 '18 at 22:00

works like a charm, and got the point. Thank You

– Daniel Kormos
Nov 24 '18 at 22:00

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Htykuut