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. Sidr

    JavaScript

    横からサイドメニューが現れるjQueryプラグイン「Sidr」

    面白いjQueryプラグインがあったのでメモがてらご紹介します。Sid…

  2. jQuery Autocompleter

    JavaScript

    カスタマイズ性に優れたサジェスト機能を実装できる「jQuery Autocompleter」

    jQuery Autocompleterはカスタマイズ性に優れたサジェ…

  3. jQuery fullsizable
  4. formToWizard

    JavaScript

    ステップごとに入力可能なフォームを実装できる「formToWizard」

    formToWizardはステップごとに(ウィザード)入力可能なフォー…

  5. jQuery Text Fade Delay
  6. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP