Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラグインです。スクロールしても特定の要素を固定したまま表示させたい場合に最適です。スティッキーサイドバー、スティッキーナビゲーション、スティッキーヘッダー／フッターなど、応用次第で様々な用途に活用できます。
Zebra Pin
以下のページからZebra Pinの実際のデモ動作をチェックできます。
デモでは下へスクロールしていくと、Option 1、Option 2……といった項目がページ上部へ固定表示されます。また、左側にはメニューも固定されたまま表示されます。
ナビゲーションメニューなどは常にユーザーの目のつくところに用意されるかたちになるので、いつでも好きなメニューへアクセスできるのが便利です。
また、デモにはコールバックが実装されたサンプルも用意されています。スクロールで固定される前の状態では「How to disappear completely」とだけ書かれていますが、スクロールして固定されると「I was hidden, babe」という文字に切り替わると同時に背景色も変化します。
Zebra Pinにはオプションもいくつかあり、class_name、contain、hard、top_spacing、bottom_spacing、z_indexという項目によるセッティングが可能であるほか、イベントにはonPin、onUnpinが用意されています。
主要なブラウザとIE7+にも対応済みなところがいいですね。
というわけで、軽量でカスタマイズ性も備えたjQueryスティッキープラグイン「Zebra Pin」の紹介でした。Zebra Pinの具体的な使い方やダウンロードは、以下のページからどうぞ。
