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

上記のリンク先で以下の３つにチェックを入れて、
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のスマホを所有している人では、バージョンのばらつきが結構あるんですね、同時に、古いバージョンでも根強く利用されているということも。。
面倒な対応であることは間違いないですが、これも我慢です！がんばりましょう