title: Hide page scroll when clicking menu button
body: <p>I use the code below to display a mobile menu on my page.
  I would like to know the following:</p>
  
  <p>How to hide the page scroll bar when I click the menu button and then scroll again when I close the menu?</p>
  
  <pre><code>&lt;script&gt;
    $( document ).ready(function() {
       console.log( "ready!" );
       var mobileTrigger = $('.js-mobile-menu-trigger');
       var mobileMenu = $('.js-mobile-menu');
  
       mobileTrigger.on('click', function() {
           $(this).toggleClass('active');  
           mobileMenu.toggleClass('active');                     
           console.log('wat');        
       });   
    });
  &lt;/script&gt; 
  
   &lt;html&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
  
      &lt;div class="site-header-inner"&gt;
         &lt;button class="site-nav-trigger js-mobile-menu-trigger"&gt;
         &lt;span class="site-nav-trigger-icon"&gt;Menu&lt;/span&gt;&lt;/button&gt;
         &lt;ul class="site-nav js-mobile-menu"&gt;
  
            &lt;li&gt;&lt;a class="nav-link-home"href="/"&gt;Menu&lt;/a&gt;&lt;/li&gt;    
            &lt;li&gt;&lt;a class="nav-link-home"href="/"&gt;Menu&lt;/a&gt;&lt;/li&gt;    
            &lt;li&gt;&lt;a class="nav-link-home"href="/"&gt;Menu&lt;/a&gt;&lt;/li&gt;    
          &lt;/ul&gt;
      &lt;/div&gt;
  
     &lt;div id="content"&gt;text text text text text &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>