Android's Chrome URL bar not hiding on mobile website

On a mobile website I'm making (temp site here), when scrolling down the address bar in android doesn't slide up and disappears, as seen in this image

I THINK 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...

My question 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?

I already tried this:

$(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());
    });

});

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...

Help!!