css - iOS 7、PhoneGap、jQuery Mobile での奇妙なスクロール

Question

ページ内に要素のリストを含む非常に単純なアプリを開発しています。jQueryMobile で PhoneGap を使用しています。比較を行うために、jQuery Mobile Listview とリストのカスタム実装の両方を使用しました。どちらの実装も同じ問題を共有しています。

画像は千の言葉よりも優れていると思います...

画像でわかるように、ヘッダーはステータス バーの下に固定され、前景にあります。ただし、リストをスクロールすると、要素が電話のステータス バーを上書きします。私が望むのは、一般的な iOS リストのように、要素がヘッダーの下で「消える」ことです。

どうすればこれを達成できますか？

CSS の関連部分を以下に示します。

[data-role=header]{
  z-index:100;
  width:100%;
  position:fixed;
}

/*
 * iOS7 NavBar Margin
 */
.myMarginClass
{
  margin-top : 20px;
}

.myMarginClass > [data-role=header]{
  z-index:100;
  width:100%;
  position:fixed;
}

.myMarginClass > [data-role=content]{   
  position:relative;
  top:40px;
}

関連する HTML

<div data-role="page" class="myMarginClass" id="docListPage">
  <div data-role="header">
    [...]
  </div>

  <div data-role="content">
    [...]
  </div>
  <div data-role="footer" data-position="fixed" data-tap-toggle="false">
    [...]
  </div>
</div>

ご協力いただきありがとうございます。リック。