no-image

JavaScript

サイドバーをフローティングできる「FloatSidebar.js」

FloatSidebar.jsはサイドバーをフローティングできるVanilla JS プラグインです。コンテンツをスクロールしてもサイドバーが隠れることなく常に表示された状態になるので、思わず注目してしまいますね。

FloatSidebar.js

デモ

コンテンツを上下にスクロールすると分かると思いますが、右側にあるサイドバーが非表示になることなく表示されます。シンプルな機能ですが、常に表示された状態になることでユーザーにしっかりアピールできますね。

ファイル容量も圧縮版で2KBほどと非常に軽量なところがグッドです。使い方・マークアップともにシンプルでとても簡単に実装できます。

オプションには、sidebar、relative、sidebarInner、topSpacing、bottomSpacingが用意されています。ちなみにtopSpacingのデフォルト値は0、bottomSpacingのデフォルト値も0になっています。

そのほか、forceUpdate()とdestroy()といったAPIもあるので、気になる方はぜひチェックしてみてください。

FloatSidebar.js

関連記事

  1. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  2. TextFit

    JavaScript

    テキストをコンテナ幅にすばやくフィットさせる「TextFit」

    TextFitは、一行または複数行のテキストをコンテナ幅(オプションに…

  3. Simple button radios

    JavaScript

    シンプルで高性能なラジオボタンを実装できる「Simple button radios」

    Simple button radiosはシンプルで高性能なラジオボタ…

  4. jQuery Lighter

    JavaScript

    優雅なフェードで拡大縮小されるLightbox系ギャラリー・jQuery Lighter

    jQuery Lighterは美しいフェードで画像を拡大縮小させること…

  5. Choreographer-js

    JavaScript

    多彩なCSSアニメーションを実現できる「Choreographer-js」

    Choreographer-jsは、多彩なCSSアニメーションを実現さ…

  6. textfit.js

    JavaScript

    コンテナにテキストをフィットさせれるjQueryプラグイン「textfit.js」

    textfit.jsは、コンテナ内に表示するテキストをフィットさせるこ…

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP