FloatSidebar.jsはサイドバーをフローティングできるVanilla JS プラグインです。コンテンツをスクロールしてもサイドバーが隠れることなく常に表示された状態になるので、思わず注目してしまいますね。
FloatSidebar.js
以下のページから実際のデモやコードをチェックできます。
コンテンツを上下にスクロールすると分かると思いますが、右側にあるサイドバーが非表示になることなく表示されます。シンプルな機能ですが、常に表示された状態になることでユーザーにしっかりアピールできますね。
ファイル容量も圧縮版で2KBほどと非常に軽量なところがグッドです。使い方・マークアップともにシンプルでとても簡単に実装できます。
オプションには、sidebar、relative、sidebarInner、topSpacing、bottomSpacingが用意されています。ちなみにtopSpacingのデフォルト値は0、bottomSpacingのデフォルト値も0になっています。
そのほか、forceUpdate()とdestroy()といったAPIもあるので、気になる方はぜひチェックしてみてください。
というわけで、フローティングするサイドバーを実装できる「FloatSidebar.js」の紹介でした。ライセンスはMITになります。FloatSidebar.jsの詳しい実装方法やダウンロードは、以下からどうぞ。
