position: fixedは、androidの一部の端末(4.2系?)のChromeでないデフォルトブラウザでは効かないらしい。jQuery mobileでヘッダを固定したほうが良いという話を読んで、導入したけど固定されない・・・
Coreは全部必要?
ヘッダの固定のためだけにjQuery mobileの全ての機能を含んだjsを使いたくないので、以下のようにToolbarsとあるところにだけチェックしてダウンロードしたものを使っていた。
でも、これだとヘッダが固定されない。
Toolbarsをチェックすると依存関係にあるものもの自動でチェックされるのだが、漏れがあるのだろうと推測。Core全部チェックしたら、ヘッダが固定されるようになりました\(^o^)/
ヘッダの固定方法
ググればたくさん出てきますが、せっかくなので書いておきます。
<script src="/assets/vendor/jquery-2.1.4.min.js" type="text/javascript"></script>
<link href="/assets/vendor/jquery.mobile.custom-1.4.5/jquery.mobile.custom.structure.min.css" type="text/css" rel="stylesheet" />
<script src="/assets/vendor/jquery.mobile.custom-1.4.5/jquery.mobile.custom.min.js" type="text/javascript"></script>
このようにjqueryおよび、jquery mobileのcss、jsをロード。ヘッダを固定したいだけで見栄えは自分でカスタムしたいなら、jquery.mobile.custom.structure.min.cssだけロードすれば良いです。themeの方は不要。
固定するヘッダは以下のようにdata属性をつける。
<body>
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>ヘッダ</h1>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>フッタ</h1>
</div>
</body>
data-tap-toggleをfalseにしておくと、タップしたときにヘッダやフッタが消えなくなります。