sticky-sidebar.jsでサイドバーのスクロール追従を実装する方法

2026.01.16
Tips

sticky-sidebar.jsを使って、サイドバーのスクロール追従を実現する方法の備忘録です。

sticky-sidebar.js は、サイドバーを画面内に固定してスクロールに合わせて追従させる機能を実装できるJavaScriptプラグインです。

DEMO

jQueryがない環境でも実装可能で、コンテンツが長いページのナビゲーション改善に役立ちます。

sticky-sidebar.jsのダウンロード

はじめに、下記のGitHubからjsファイルをダウンロードします。

sticky-sidebar.js（Git Hub）

Codeボタンをクリックして、開いたプルダウンの中から「Download ZIP」を選択してファイルをダウンロードします。

ダウンロードしたZIPファイルは解凍しておきます。

ファイルの設定

解凍したファイルの中から「sticky-sidebar.min.js」をサーバにアップロードします。

jsファイルをHTML内に読み込むため、下記のコードを</body>タグの直前に追記します。

<script src="sticky-sidebar.min.js"></script>

ファイルのディレクトリは、使用する環境に合わせて変更してください。

HTMLの構成

続いてサイドバーを追従させるために必要な構造のHTMLコードを作成します。

以下は、HTMLのサンプルコードです。

<div class="wrapper">
  <main class="main">
    <!-- Content goes here -->
  </main>
  <aside class="sidebar">
    <div class="sidebar-inner">
      <!-- Content goes here -->
    </div>
  </aside>
</div>

全体を囲む要素「wrapper」の中にメインコンテンツ「main」とサイドバー「sidebar」を配置します。サイドバーの中には、内容を包むインナー要素「sidebar-inner」が必要です。

JSのコードを追加

続いて、プラグインを動作させるためのjsコードを記述します。

以下のコードをJSファイルを読み込む<script>の下に追記します。

<script type="text/javascript">
 const sidebar = new StickySidebar('.sidebar', {
    containerSelector: '.wrapper',
    innerWrapperSelector: '.sidebar-inner',
    topSpacing: 30,
    bottomSpacing: 0
  });
</script>

StickySidebarの後ろには、サイドバーのクラス「sidebar」を指定します。

containerSelectorには全体を囲う要素のクラス「.wrapper」を、innerWrapperSelectorにはサイドバー内部の要素のクラス「.sidebar-inner」を指定します。

オプションとして、topSpacing bottomSpacingで固定する上下の位置を指定します。

サイドバーがtopSpacingで指定した高さに達すると位置固定され、画面スクロールに追従するようになりました。

レスポンシブ対応

スマートフォン表示のレスポンシブ対応で、サイドメニューをページ下部に移動したり、非表示にするなど、固定追従させる必要がない場合は、処理を分けて対応させます。

画面幅が一定値より小さくなったときに追従を無効化する以下のコードを、<script>内に追記します。

function checkStickyState() {
  if (window.innerWidth <= 768) {
    sidebar.destroy();
  } else {
    sidebar.initialize();
  }
}
checkStickyState();
window.addEventListener('resize', checkStickyState);

画面の横幅が768px以下になる場合、StickySidebarを無効化しています。画面サイズは「768」の部分で指定します。

その他に設定できるオプションのイベントは、公式サイト（Sticky Sidebar）で詳しく紹介されています。