[スマートフォン]ヘッダーを固定配置にするJavaScriptスマートフォン

はじめまして、今回初登場のアシスタントデザイナーのまこっちゃんです。
今後ともよろしくお願いいたします。

最近はスマートフォンサイト制作全盛期ですよね。今後はスマートフォンでリッチなサイトが、現れるのではないかとわくわくしています。
今回は、スマートフォンサイト制作中に躓いた固定ヘッダーにつきまして、『固定ヘッダーのJavaScriptは何がベストか』を考えていきます。

Mobile Webkit では【position:fixed;】が効かない！

皆さんもPCサイトで一度は固定ヘッダーのサイトを制作された事があるかと思いますが、スマートフォンサイト制作で試された方もいらっしゃるのではないでしょうか。
PCサイトの固定ヘッダーで使用される【position:fixed;】がiPhone・iPadなどでは効かないという問題点に気をつけましょう。

iscroll

まず、スマートフォン向けに使われる固定ヘッダーのJavaScriptとして有名なiscrollを使ってみました。

iscrollは使用した時点で、thickbox.jsなど他にもJavaScriptを使用してしまうと干渉して、android・iPhoneなどのスマートフォンでa要素をタップしたときにハイライトしなくなりますし、スクロールが異常に遅くなるなどの問題が起こりました。
さらにこのiscrollにはソースに問題があり、iPhoneでは一度横にして、縦に戻してみないと下までスクロールできないという状態でした。
ちなみに最初から横にした状態では、下までスクロールできます。

非常に頭を悩ませ、社内のエンジニアさんにお願いして修正していただき、動くようになりました。以下にソースを書いておきます。

iscrollで最初から下までスクロールさせるためのソース

this.refresh();
この記述をダウンロードしてすぐのソースの297行目に加えて頂くと動きます。

　_start: function (e) {
var that = this,
point = hasTouch ? e.touches[0] : e,
matrix, x, y,
c1, c2;

⇒　this.refresh();

if (!that.enabled) return;
if (that.options.onBeforeScrollStart) that.options.onBeforeScrollStart.call(that, e);
if (that.options.useTransition || that.options.zoom) that._transitionTime(0);

jQueryMobile

また、他の固定ヘッダーに使用されるJavaScriptとしてjQueryMobileがあります。こちらも擬似的にheaderやfooterを固定できます。

スクロール時には固定した部分が一度消え、スクロールをやめると再び固定した部分が出現するというものなのですが、こちらはiPhoneでは、固定ヘッダー部分にリンクをつけてそれを異常な速さでタップしない限り挙動が遅くなったり、おかしくなることはありませんでした。

jQueryMobileの固定ヘッダーの書き方

<div data-role="header" data-position="fixed">
<h1>Fixed toolbars</h1>
</div>

ちなみにjQueryMobileは多機能で、今回ご紹介しました固定ヘッダーの他にもスライダーや開閉式のコンテンツが簡単に作成できるなど非常に便利です。皆さんも一度試してみてはいかがでしょうか。
下記はおまけのスライダーです。こんなに短いコードで実現できるのは嬉しいですよね。

【おまけ】スライダーの書き方

<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>

まとめ

常にヘッダーを出したい場合は他のJavaScriptを使用しないと割り切ってiscrollを使い、スマートフォンの広告表示などによくありますが、スクロールを止めた時だけ固定ヘッダーを出すのはjQueryMobileを使用するなど、時と場合により使い分けて頂きたいと思います。ただ、現時点ではjQueryMobileの方が使い勝手の良いJavaScriptでした。