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

Houdiniシンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」前のページ

ページ読み込み時に画面上部にプログレスバーを表示する「Skylo」次のページno-image

最近の記事

  1. マリーゴールドのゴム手袋(バスルーム)
  2. クリスマスエスプレッソロースト
  3. シーザーチキン 石窯カンパーニュ
  4. スキャルプ&ヘア リファイニング トリートメント オイル R
  5. ポーレックスの手動ミル
PAGE TOP