jQueryを応用したスマートフォン向けWeb UIフレームワーク「jQuery Mobile」の最新版1.1がリリースされました。このバージョンから、CSSのposition:fixedを利用して画面上下のツールバーを固定することができるようになったので、早速当ブログのテンプレートも直してみました。
ドキュメントによると、こんな感じでdata-position属性に「fixed」を設定するといいようです。
<div data-role="header" data-position="fixed"> <h1>Fixed Header!</h1> </div>
iPhone 4S（iOS 5.1）だとこんな感じ。上部ツールバーと広告の部分までを固定にして、その下をスクロールさせることができます。この手の広告ではスクロールする時に消えてスクロールが止まるたびに画面下部に出てくるものがありますが、あれよりはうざったくないかと思います。
007SH（Android 2.3.3）だとこんな感じ。こちらも上部バーは完全に固定されます。
ちょっと気になったのはISW11SC（Android 2.3.6）。上部バーが固定はされるのですが、スクロールされると一時的に場所がずれてしまいます。スクロールが終わると元の位置に収まる感じです。
ISW11SCについてはjQuery Mobileが公開しているサンプルで試しても同じようにバーの位置が動いてしまうので、jQuery Mobile 1.1との相性問題（というかCSSのposition:fixedとの相性）ということが言えそうです。類似したフレームワークのjqMobiではISW11SCでもバーの位置が固定されるので、何か手はあるのでしょうが…。