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

サイト構築 -JavaScript

Post on:2017年10月16日

Sticky Sidebarの特徴

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

Sticky Sidebarのデモ

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

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

デモページ: Basic

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

デモページ: Scrollable Sticky Element

Sticky Sidebarの使い方

Step 1: 外部ファイル

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

<body>
  ...
  コンテンツ
  ...
  <script type="text/javascript" src="js/sticky-sidebar.js"></script>
</body>

<body>

...

コンテンツ

...

</body>

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

<body>
  ...
  コンテンツ
  ...
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.sticky-sidebar.js"></script>
</body>

<body>

...

コンテンツ

...

</body>

HTML

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

<div class="main-content">
    <div class="sidebar">
        <div class="sidebar__inner">
            <!-- サイドバー -->
        </div>
    </div>
    <div class="content">
        <!-- コンテンツ -->
    </div>
</div>

</div>

</div>

JavaScript

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

<body>
  ...
  コンテンツ
  ...
<script type="text/javascript" src="js/sticky-sidebar.js"></script>

<script type="text/javascript">
  var sidebar = new StickySidebar('.sidebar', {
    topSpacing: 20,
    bottomSpacing: 20,
    containerSelector: '.main-content',
    innerWrapperSelector: '.sidebar__inner'
  });
</script>
</body>