title: disable scroll on body and enable scrolling in navigation if nav is more than 100vh
body: <p>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.</p>
  
  <p>html</p>
  
  <pre><code>&lt;nav id="nav-bar"&gt;
      &lt;div class="container"&gt;
          &lt;div id="upper-nav"&gt;
              &lt;a id="logo-wrapper" href="#"&gt;
  
              &lt;/a&gt;
              &lt;a id="menu-icon-wrapper" class="menu-icon" href="javascript:void(0)" onclick="toggleMenu()"&gt;
  
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="lower-nav"&gt;
              &lt;ul id="navigation"&gt;
                  &lt;!-- navigation items --&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class="content"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var navBar = document.getElementById("nav-bar");
  
  function toggleMenu() {
      navBar.classList.toggle("nav-bar-active");
  }
  </code></pre>