title: How to prevent another div from scrolling when i am scrolling in the navigationbar phone
body: <p>I am building an app in phonegap, but i am encountering a bug that, if I scrolled to the bottom of the navigationbar, my body wrap starts scrolling.</p>
  
  <p>This is an example:</p>
  
  <pre><code>&lt;body&gt;
      &lt;nav id="navbar-header"&gt;
           &lt;div class="navbar-header"&gt;&lt;/div&gt; //navbar in top of the page, not relevant probarly
           &lt;div class="header-inner"&gt;
                 &lt;div id="navbar"&gt;
                       &lt;ul&gt;
                             &lt;li&gt;list with pages, on some devices scrollable, on some not.&lt;/li&gt;
                             &lt;li&gt;some of it is dynamically loaded.&lt;/li&gt;
                       &lt;/ul&gt;
                       &lt;div&gt;lot of elements that make it scrollable&lt;/div
                 &lt;/div&gt;
           &lt;/div&gt;
       &lt;/nav&gt;
       &lt;div id='wrap'&gt;
            &lt;div class="overlay"&gt;is display:block if the navbar is shown, else it is display:none&lt;/div&gt;
            &lt;div id='pageContext'&gt;lot of dynamic in here, so scrollable most of the times&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#navbar-header {
  height: 70px;
  }
  
  #navbar {
  position: relative;
  width: 225px!important;
  height: auto;
  min-height: 100vh;
  float: right;
  padding: 0;
  margin-right: -225px; //width is static, this is set to 0 with animation if the navbar slides in.
  margin-top: 10px;
  overflow-y: scroll;
  }
  
  .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  z-index: 10;
  background-color: black;
  background-size: contain;
  display: none;
  }
  </code></pre>
  
  <p>and the javascript i currently use:
  the code that is //commented out is other not properly working solutions but i keep them in this snippet in case of.</p>
  
  <pre><code>$(function(){
      var menuBtnBusy = false;
      $('#menubtn').click(function(){ 
          if( !menuBtnBusy ) {
              menuBtnBusy = true;
              var $this = $(this);
  
              if( $this.attr('aria-expanded') === "false" ) {
                  $('#navbar').animate({'margin-right':'0px'}, 600, function() {
                      $this.attr('aria-expanded', "true");
                      menuBtnBusy = false;
                      // $('body').css('overflow','hidden');
                  });
                  $('.overlay').css('display','block');
                  $('.overlay').css('opacity',0.25);
                  // var totalHeight=$(window).height()-70;//$('#navbar-header').height();
                  // previousYoffset=window.scrollY;
                  // $('#homepage-wrapper').css('max-height',totalHeight+'px');
                  // $('#homepage-wrapper').css('overflow','hidden');
              }
              else {
                  $('.overlay').css('display','none');
                  $('.overlay').css('opacity',0);
                  $('#navbar').animate({"margin-right":"-225px"}, 600, function() {
                      $this.attr('aria-expanded', "false");
                      menuBtnBusy = false;
                      // $('body').css('overflow','visible');
  
                      $('#navbar ul').show();
                      $('#navbar .region-wrap').hide();
                  });
                  // $('#homepage-wrapper').css('max-height','none');
                  // $('#homepage-wrapper').css('overflow','visible');
                  // window.scroll(0,previousYoffset);
                  // previousYoffset=0;
              }
          }
      });     
      $('.overlay').on("click", function(e) {
          if (!menuBtnBusy) {
              menuBtnBusy = true;
              if ( $('#menubtn').attr('aria-expanded') === "true" ) {
                  if (e.target.id != '#navbar' &amp;&amp; $(e.target).parent('#navbar').length == 0) {
                      $('.overlay').css('display','none');
                      $('.overlay').css('opacity',0);
                      $('#navbar').animate({"margin-right":"-225px"},600,function() {
                          $('#menubtn').attr('aria-expanded', "false");
                          menuBtnBusy = false;
                          // $('body').css('overflow','visible'); 
                          $('#navbar ul').show();
                          $('#navbar .region-wrap').hide();
  
  
                      });     
                      // $('#homepage-wrapper').css('max-height','none');
                      // $('#homepage-wrapper').css('overflow','visible');    
                      // window.scroll(0,previousYoffset);
                      // previousYoffset=0;                   
                  }
              }
          }
      }); 
  }); 
  </code></pre>
  
  <p>Does anyone know how i am able to prevent the scrolling of the body when the navigationbar is opened?</p>
  
  <p>I have tried quite a lot of things, like temporarily setting the wrap height to 100% and overflow hidden, but that solution makes the page jump to the top each time i open the navigationbar.</p>
  
  <p>So i do not want the body to jump at all when opening the navigationbar.</p>
  
  <p>One thought that came in my mind is that when scrolling, getting if the nearest element is the navbar or the body behind but i have totaly no clue if this is possible, and maybe there are smarter ideas.</p>
  
  <p><a href="https://i.stack.imgur.com/IsVoo.png" rel="nofollow noreferrer">image of my issue</a></p>