[JS]スマフォで各セクションのヘッダをそれぞれスクロールに追従させるスクリプト

iPhone, iPad, ガラケーなどのスマフォで、各セクションのヘッダをそれぞれ半透明の状態でスクロールに追従させるスクリプトを紹介します。

Floating Headers for iScroll

• デモ
• 実装

デモ

デモはデスクトップ用のブラウザではなく、スマフォでご覧ください。
※キャプチャはiPodです。

デモページ

ずんずんスクロールすると、A, B, C...とヘッダが各セクションごとに追従します。

A, B, C と追従中

対応ブラウザ

• iPhone 4GS (iOS5)
• iPhone 4G (iOS5)
• iPhone 3GS (iOS5)
• iPad 3 (iOS5)
• iPad 2 (iOS5)
• Galaxy S3 (Ice Cream Sandwich)
• Galaxy S2 (Gingerbread)
• NEXUS S (Jelly Bean)

実装

Step 1: 外部ファイル

外部ファイルは下記の2つのスクリプトと当スクリプト・スタイルシートをhead内に記述します。

zepto.js

jQueryと互換性のあるモバイル用軽量ライブラリ

iscroll.js

モバイルでposition:fixedを実現するスクリプト

<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script>
<script src="dist/iscroll.js"></script>
<link rel="stylesheet" href="dist/iscroll_floating_headers.css"/>
<script src="dist/iscroll_floating_headers.js"></script>

Step 2: HTML

コンテンツは普通のリスト要素で、追従させるヘッダのheader要素と全体を内包するdiv要素を加えます。

<div id="myList" class="i4-ui-list">
	<ul>
		<header>A</header>
		<li>Andrew Packard</li>
		<li>Audrey Horne</li>
		<header>B</header>
		<li>Benjamin Horne</li>
		<li>Bernard Renault</li>
		<li>Betty Briggs</li>
		<header>C</header>
		<li>Cappy</li>
		<li>Caroline / ...</li>
		<li>Catherine Martell / ...</li>
		...
		...
	</ul>
</div>

Step 3: JavaScript

セレクタでラッパーの要素（myList）を指定し、スクリプトを実行します。

<script>
$(function () {
	new iScrollFloatingHeaders( document.getElementById('myList') )
});
</script>