title: Weird scrolling with iOS 7, PhoneGap and jQuery Mobile
body: <p>I am developing a very simple app, with a list of element, inside a page.
  I am using PhoneGap with jQueryMobile.
  To make a comparison, I used both the jQuery Mobile Listview and a custom implementation of the list. Both the implementations share the same problem.</p>
  
  <p>I think that an image is better than a thousand of words...</p>
  
  <p><img src="https://i.stack.imgur.com/vsZ9L.png" alt="scrolling past the header">  </p>
  
  <p>As you can see in the image, the header is below the status bar, fixed and in foreground.
  However, when I scroll the list, the elements override the phone status bar. What I would like to have, is that the elemnts "disapear" under the header, like in common iOS list.</p>
  
  <p>How can I achieve this?</p>
  
  <p>I put the relevant part of the CSS below.</p>
  
  <pre><code>[data-role=header]{
    z-index:100;
    width:100%;
    position:fixed;
  }
  
  /*
   * iOS7 NavBar Margin
   */
  .myMarginClass
  {
    margin-top : 20px;
  }
  
  .myMarginClass &gt; [data-role=header]{
    z-index:100;
    width:100%;
    position:fixed;
  }
  
  .myMarginClass &gt; [data-role=content]{   
    position:relative;
    top:40px;
  }
  </code></pre>
  
  <p>The relevant HTML</p>
  
  <pre><code>&lt;div data-role="page" class="myMarginClass" id="docListPage"&gt;
    &lt;div data-role="header"&gt;
      [...]
    &lt;/div&gt;
  
    &lt;div data-role="content"&gt;
      [...]
    &lt;/div&gt;
    &lt;div data-role="footer" data-position="fixed" data-tap-toggle="false"&gt;
      [...]
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks for your help.
      Rik.</p>