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. jQuery Tags Input

    JavaScript

    シンプルでお洒落なタグを入力することができるjQueryプラグイン「jQuery Tags Inpu…

    とても便利で面白いjQueryプラグインがあったのでご紹介します。シン…

  2. progresspieSVG

    JavaScript

    円形のプログレスバーを実装できる「progresspieSVG」

    progresspieSVGは円形のプログレスバーを実装できるjQue…

  3. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  4. dndod

    JavaScript

    依存性のないシンプルで簡単なモーダルライブラリ「dndod」

    dndodはjQueryなどへの依存性のないシンプルで簡単なJavaS…

  5. Vimeo Carousel Gallery

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP