search
LoginSignup
2

More than 5 years have passed since last update.

posted at

updated at

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

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
What you can do with signing up
2