title: Android's Chrome URL bar not hiding on mobile website
body: <p>On a mobile website I'm making (<a href="http://douro.ga" rel="nofollow noreferrer">temp site here</a>), when scrolling down the address bar in android doesn't slide up and disappears, as seen in this image</p>
  
  <p><a href="https://i.stack.imgur.com/6n4l5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6n4l5.jpg" alt="enter image description here"></a></p>
  
  <p><strong>I THINK</strong> this is cause of the DOM structure and css needed to implement snapJS (for the website sidebars), the #header is fixed outside the divs #all-elements and #contents ... and when the user is scrolling down the website he is actually scrolling the #content div and not the html element making Chrome android not hiding the address bar...</p>
  
  <p><strong>My question</strong> Is there a way in JS/jquery to mirror the scrolling of the div #content, to the html element, when this div is scrolled down? And thus making the android chrome address bar disappear?</p>
  
  <p>I already tried this:</p>
  
  <pre><code>$(window).load(function() { 
  
      var contentHeight = $('#content').prop('scrollHeight');
      var headerHeight = $('#header').prop('scrollHeight');
      // 58px (maybe) for android chrome address bar bar
  
      var total = contentHeight + headerHeight + 58; 
  
      $("html").css("height",total +"px" );
  
      $('#content').on('scroll', function () {
          $('html').scrollTop($(this).scrollTop());
      });
  
  });
  </code></pre>
  
  <p>But this only gets the URL bar to disappear when the scrolling reachs the bottom of the page and then it puts a lot of white space on the bottom...</p>
  
  <p>Help!! </p>