jquery mobile ヘッダ 固定

JQuery Mobileならば、ヘッダの固定も簡単です。
「data-position=”fixed”」を追加するだけ。

ヘッダやフッタに data-position=“fixed” という属性を指定してやります。

<div data-role="header" data-position="fixed">
<h1>Fixed toolbars</h1>
</div>

うまく表示されない場合には、CSSの position:fixed をサポートしていないブラウザで見ている可能性があります。iPhoneとArrowsではうまく表示することができました。
ただ、ArrowsのせいなのかAndroidのせいなのか今ひとつ動きがなめらかでないような気がしています。