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. スマトラ
  3. さくらドーナツ
PAGE TOP