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. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

  2. JavaScript

    ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」…

    覚えておくと便利そうだったのでメモがてらエントリーします。リスト化した…

  3. jsPanel3

    JavaScript

    多機能なフローティングパネルを実装できるjQueryプラグイン「jsPanel3」

    jsPanel3は、高度で多機能なフローティングパネル(ウィンドウ)を…

  4. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

  5. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

  6. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

最近の記事

  1. LAOWA 10-18mm F4.5-5.6 FE Zoom
  2. M3IETW BLACK
  3. V60珈琲王2 コーヒーメーカー
  4. Anker PowerCore Lite 20000
  5. ネクスタイム

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP