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

jQuery Equal Height異なる要素の高さを揃えてくれる「jQuery Equal Height」前のページ

iOS 11の「片手入力」機能がとても使いやすい次のページiOS 11の「片手入力」機能

関連記事

  1. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  2. no-image
  3. Before and after slider
  4. Multi-Step-Form-Js
  5. zelect

    JavaScript

    セレクトボックスをカスタマイズして使いやすくしてくれる「zelect」

    zelectはセレクトボックスをユーザーが使いやすくなるようにカスタマ…

  6. jQuery-ResizableColumns

    JavaScript

    テーブルのカラムをリサイズできる「jQuery-ResizableColumns」

    jQuery-ResizableColumnsは、テーブルのカラムをリ…

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP