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

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

  2. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  3. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  4. Sidr

    JavaScript

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

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

  5. Crosscover

    JavaScript

    多彩なアニメーションがいい!シンプルで使いやすいjQueryイメージカルーセル「Crosscover…

    Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージ…

  6. Tabby

    JavaScript

    軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」

    とても軽量でシンプルなタブメニューを実装できるjQueryプラグイン「…

最近の記事

  1. YAECA ワイドテーパードデニム 10-13WW
  2. ADR-3ML39シリーズ
  3. キュレル モイスチャーバーム
  4. FUJIFILM X-Pro3
  5. iPhone 11 ProとApple Watch Hermès

アーカイブ

PAGE TOP