LoginSignup
2

More than 5 years have passed since last update.

Android4.2系でヘッダーが固定されない

Last updated at Posted at 2015-12-16

Android4.2系でヘッダーが固定されない

Android4.2系のデフォルトブラウザで、スクロール時にヘッダーが固定されない問題があるようです。


css
.header {
 display: block;
 position: fixed;
 z-index: 100;
}

上記のようにposition: fixed;を用いて、固定をするやり方が、基本的というか一般的。
Android4.2系のデフォルトブラウザ以外であれば、問題なくこれで固定が可能。

自分が確認したかぎりだと、ページをスクロールすると、固定していたはずのヘッダーが突然消え、
スクロールが終わると、突然ページど真ん中にどーん!っと出現。そのうえ、そのままの状態でスクロールを行うと、ど真ん中で固定が行われてしまうのだ。

でも、直す方法は一応あるみたいです!
以下の方法で試してみてください。


■方法その1

cssでfixedを行わず、jqueryでfixedを行う。

javascript
$(function() {
    //ロード or スクロールされると実行
    $(window).on('load scroll', function(){

        //ヘッダーの高さ分(80px)スクロールすると.headerクラスを追加
        if ($(window).scrollTop() > 80) {
            $('header').addClass('.header');
        } else {
            //80px以下だとfixedクラスを削除
            $('header').removeClass('.header');
        }
    });
});

■方法その2

jQuery-mobileで対応する。
jQuery Mobile Download Builder

上記のリンク先で以下の3つにチェックを入れて、
Toolbars: Fixed
Toolbars: Fixed: Workarounds
Toolbars: Fixed
ページ最下部の「Build my download」ボタンを押し、DLします。
続いて、DLしたファイルをアップロード&読み込み。

javascript
<script language="JavaScript" type="text/javascript" src="/js/jquery.mobile.custom.js"></script>

固定したい要素にdata-role=”header”とdata-position=”fixed”を追加。

固定させたい.headerに以下の属性を追加させる。

html
<div class="header" data-role="header" data-position="fixed">
  ~~~~~~
</div>

最後に

これでおそらくヘッダーの固定は問題なく表示されると思います。

今更ながらですが、Androidのスマホを所有している人では、バージョンのばらつきが結構あるんですね、同時に、古いバージョンでも根強く利用されているということも。。
面倒な対応であることは間違いないですが、これも我慢です!がんばりましょう

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