Sticky Sidebar

JavaScript

スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サイドバーを実装することができるJavaScriptプラグインです。ページを上下にスクロールしても、サイドバーが非表示にならずにしっかり追尾します。スクロールとともに消えていかないサイドバーを実装したいという人にはピッタリの機能ですね。

Sticky Sidebar

デモ

デモページを読み込むと左側にサイドバーが、右側にメインコンテンツが表示されています。下へスクロールしていくと、メインコンテンツは通常どおり徐々に上から非表示になっていきますが、「This is sticky column」と書かれたサイドバーは同じ位置に固定され、常に表示されている状態になります。

上下にスクロールしてもサイドバーが常に表示されているので、非表示にしたくないサイドバーを取り入れたい時に役立ちますね。

また、Sticky Sidebarにはオプションもいくつか用意されています。主なオプションは、topSpacing、bottomSpacing、containerSelector、innerWrapperSelectorといった項目があります。トップやボトムの余白などをオプションから手軽に調整することが可能です。

そのほか、サポートされているブラウザは、Firefox、Chrome、Safari、IE9+。ライセンスはMITとのこと。というわけで、スマートでパフォーマンス性に優れた追尾型サイドバーを実装したい人は、ぜひ「Sticky Sidebar」を使われてみてはいかがですか?

Sticky Sidebar

関連記事

  1. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  2. no-image

    JavaScript

    依存関係のないタグ付け機能を実装できる「taggle.js」

    taggle.jsは依存関係のないタグ付け機能を実装できるのが特徴です…

  3. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

  4. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  5. JavaScript

    立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

    立体的なナビゲーション表示を実装できるjQueryプラグイン「Box …

  6. Albumize

    JavaScript

    アルバムみたいな画像コレクションのギャラリーを管理・実装できるjQueryプラグイン「Albumiz…

    Webページにある画像コレクションをアルバムのようなギャラリーに管理・…

最近の記事

  1. iPhone 11 Pro Smart Battery Case ホワイト
  2. 渋谷スクランブル交差点
  3. ベーコンエッグ&厚切りバタートースト
  4. 有栖川公園
  5. 広尾のスタバ

アーカイブ

PAGE TOP