【jQueryプラグイン】複数ある<table>見出しのスクロール追従

iTunesのプレイリストってアーティスト名が見出しになってスクロール追従してますよね。
シンプルでかっこいいUIだなと思ってました。
↓こういうの

そこで、tableの複数見出しスクロール追従を実装するjQueryプラグインを作ってみました。
日付などでソートされているリストのがあれば、結構見やすくなるのではないかと。

デモとダウンロード

Demo
ダウンロードはこちらからどうぞ
jquery-AlternatelyHeaderOfTable (GitHub)

とりあえず公開してみただけなので、ちょくちょく修正していくつもりです。

プラグインの使い方

<table>の中に<tbody>を複数記述します。
見出しにしたい<tbody>に適当なクラス名をつけてください。

index.html

<table>
	<tbody class="header">
		...
	</tbody>
	<tbody>
		...
	</tbody>
	<tbody class="header">
		...
	</tbody>
	<tbody>
		...
	</tbody>
</table>

後はセレクタで当該<tbody>を指定して、関数を呼び出してあげます。

index.html

<script>
    $(function() {
        $("table tbody.header").AlternatelyHeaderOfTable();
    });
</script>	

これで動作します。
オプション値等は特に設定していません。

theadは複数記述したらダメ

テーブルの見出しといえば<thead>です。
最初は<table>中の<thead>を固定しようと思ったんですが、どうやら<thead>は<table>内に一つしか記述してはいけないらしいです...
その代わり<tbody>は複数記述していいそうなので、見出し用の<tbody>を用意することにしました。スマートじゃないなぁ

プラグインの中身の話

親要素の<table>をposition: relativeにして、
スクロールに合わせて見出しとなる<tbody>を順番にposition: absoluteにするだけの簡単なお仕事。
...と思いきや、意外と条件分岐が多くて、大変でした。

私事

何気にQiitaへの投稿も初めてですが、GitHubを利用するのも今回が初めてだったのですごい大変だった...
そういえばjQueryプラグインも初めて作りました。
...勉強になった気がする。