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

関連記事

  1. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

  2. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  3. Impulse Slider

    JavaScript

    3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」

    Impulse SliderというjQueryプラグインを使えば3Dス…

  4. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  5. jquery.horizonScroll.js

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP