Create jQuery mobile compatible with apple-itunes app

Question

I am trying to add the <meta name="apple-itunes-app" content=""> banner to the jQuery mobile site. The banner works, but it is added over the jQuery mobile header div ( <div data-role="header"> ), which is problematic in that jQuery scrolls down and hides everything above this div on every loaded page. This means that the user almost never sees the banner. I tried to disable all jQuery document events, and none of them disabled this function. I also tried replacing all scrollTo(x,y) with scrollTo(0,0) with jquery.js, because I saw this solution somewhere else on the Internet, and it didn't work either. What else should I do?

Here's what it looks like when loading a page:

And this is how it will look when the page loads, or what it looks like when the user scrolls all the way up:

Answer 1

Starting with jQuery 1.4, this can now be fixed with the following code:

 $(document).on( "mobileinit", function() { $.mobile.hideUrlBar = false; }); 

Source: https://github.com/jquery/jquery-mobile/issues/6081