no-image

JavaScript

軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラグインです。スクロールしても特定の要素を固定したまま表示させたい場合に最適です。スティッキーサイドバー、スティッキーナビゲーション、スティッキーヘッダー/フッターなど、応用次第で様々な用途に活用できます。

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+にも対応済みなところがいいですね。

Zebra Pin

Pushbar.jsスライドでコンテンツを引き出せる「Pushbar.js」前のページ

自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」次のページAuto-Text-Scroll

最近の記事

  1. シーザーチキン 石窯カンパーニュ
  2. スキャルプ&ヘア リファイニング トリートメント オイル R
  3. ポーレックスの手動ミル
  4. クリスマスブロンドロースト
  5. トマトとニンニク
PAGE TOP