今までにない快適動作!サイドバーを⬆⬇スクロールに合わせてぴたっとくっつけるスクリプト -Sticky Sidebar

サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。

コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプトは単体で動作し、jQueryのプラグインとして動作させることも可能です。

サイトのキャプチャ

Sticky Sidebar
Sticky Sidebar -GitHub

Sticky Sidebarの特徴

Sticky Sidebarの特徴
  • スクロール時にすべてのサイズを計算するのではなく、必要なサイズだけを再計算。
  • スクロール時のラグやジャンクを発生せず、リフローを起こさずにスムーズに動作。
  • サイドバーとコンテナのサイズが変更された時は、それらのサイズを正確に再計算。
  • 特定の状況下でフックするために、イベントトリガーを用意。
  • コンテナが長くても短くてもサイドバーを扱うことができます。
  • 他のスクリプトへの依存はなく動作。
    jQueryやZeptoのプラグインとして利用することも可能。
  • 実装はスーバー簡単!

Sticky Sidebarのデモ

Sticky Sidebarのハイパフォーマンスな軽快な動作は、デモページで体験できます。
まずは、長いコンテンツと短いサイドバーのページ。サイドバーは上に20px空けてくっつきます。

デモはIE9を含む、最新のブラウザでご覧ください。

デモのキャプチャ

デモページ: Basic

サイドバーが長い場合は、ビューポートからサイドバーははみ出して表示されます。その場合でも、コンテンツについて心配する必要はなく、サイドバーを独立して上下にスクロールさせます。

デモのキャプチャ

デモページ: Scrollable Sticky Element

Sticky Sidebarの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

jQueryやZeptoのプラグインとして利用することできます。その場合は「jquery.sticky-sidebar.js」を使用してください。

HTML

HTMLの基本構造です。
ラッパー、コンテンツ、サイドバーのclassは任意の名前が利用できます。サイドバーの内側のラッパー「.sidebar__innner」はオプションですが、この名前を使用することもお勧めします。

JavaScript

スクリプトを初期化し、実行します。
オプションでは、くっついた際の上下のスペースが指定できます。

top of page

©2017 coliss