LoginSignup
2
1

More than 5 years have passed since last update.

jQuery mobileでヘッダやフッタを固定する

Posted at

position: fixedは、androidの一部の端末(4.2系?)のChromeでないデフォルトブラウザでは効かないらしい。jQuery mobileでヘッダを固定したほうが良いという話を読んで、導入したけど固定されない・・・

Coreは全部必要?

ヘッダの固定のためだけにjQuery mobileの全ての機能を含んだjsを使いたくないので、以下のようにToolbarsとあるところにだけチェックしてダウンロードしたものを使っていた。

jqmo.png

でも、これだとヘッダが固定されない。

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にしておくと、タップしたときにヘッダやフッタが消えなくなります。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1