Hiding the address bar in mobile browsers

The port of Super Star Trek [1] to an HTML 5 mobile app involves some times dealing with the fact that the app does not have full control over the device but runs inside a browser. One of the restrictions thus applied is the omnipresent address bar in the browser. For many applications that is not a problem, but in the particular case the address bar impacts the GUI in a few ways:

The game is meant to be playable on low-end phones (such as the target platform for Firefox OS) with small screens, hence the address bar is taking up valuable space
The address bar has no function whatsoever. Users can always get away by closing the browser window or navigating to one of their bookmarks
The GUI follows a dark theme (it’s a space game after all) but the address bar has usually a bright colour, which contrasts badly

Ideally one would hide the address bar, but that seems possible only when opening a new window [2]. The solution has been used by mobile sites like twitter and facebook and involves a simple trick: listen to scroll events on the window and object scrolling too far to the top, making sure the address bar is never visible.

The code is thusly simply (with a little help from jquery):

function repositionWindowScroll(){
   var doc = window.document;
   var delement = doc.documentElement;
   var scrollOffset = (delement && delement.scrollTop || doc.body && doc.body.scrollTop || 0);
   var top = $("#topMarkerElement").offset().top;
   if (scrollOffset < top){
        var element = $("#firstVisibleElementOnScreen");
 var offset = element.offset();
        var destination = offset.top-2;
        $(document).scrollTop(destination);
   }
}

$(window).scroll(repositionWindowScroll);

where topMarkerElement is the upper most element on the page above which nothing should be shown and ‘firstVisibleElementOnScreen’ is something like a container for all elements after topMarkerElement