Toolbar hide on scroll

by khrome

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.3.2/jquery.mobile.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.3.2/jquery.mobile.js"></script>
<script src="https://rawgit.com/khrome/a8aa0fa924edf6ffe61b/raw/e63150b78afc4515a2a357b23edef36ff08976d1/jsloremipsum.js"></script>
<div data-role="page">
    <div data-role="header" data-position="fixed"> 
	    <h1>Page Title</h1> 
    </div>
    <div data-role="content" id="content"></div>
</div>

JavaScript

$('#content').html(loremIpsum(500, 1000));
var scrolling = {
    position : 0,
    up : false,
    down : true,
    showing : true
};
$(document).ready(function(){
    var toolbar = $($.mobile.activePage.children("[data-position='fixed']")[0]);
    toolbar.fixedtoolbar({ transition: 'slide' });
    $(window).scroll(function(){
        var delta = scrolling.position;
        scrolling.position = $(document).scrollTop();
        delta -= scrolling.position;
        if(delta < 0) scrolling.up = false;
        else scrolling.up = true;
        scrolling.down = delta==0?false:!scrolling.up;
        if(scrolling.active) return;
        scrolling.active = true;
        if(scrolling.down){
            if(scrolling.showing) $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('hide');
            scrolling.showing = false;
        }else{
            if(!scrolling.showing) $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('show');
            scrolling.showing = true;
        }
        setTimeout(function(){
            scrolling.active = false;
        }, 800);
    });
});