【レスポンシブ対応】スクロールしてもサイドメニューが固定されるjQueryプラグインFit sidebar

2017年6月9日2023年9月24日

スクロールでサイドメニューが見えなくなってしまうのを回避するときに便利なのがjQueryのプラグイン「Fit sidebar」。サイドメニューがなくならないのでユーザビリティも良くなります。

Fit sidebarのダウンロード

こちらの jquery.sitekit からダウンロードして解凍。「fit-sidebar」フォルダがありますのでこちらを利用します。

Fit sidebarの使い方

ファイルの読み込み

jquery.fit-sidebar.cssファイルとjquery.fit-sidebar.jsファイルを読み込みます。

1. head内でjquery.fit-sidebar.cssを読み込み

<link rel="stylesheet" href="css/jquery.fit-sidebar.css">

※中身は少ないのでそのままご自身のスタイルシートに貼りつけてしまってもOKです。

2. /bodyの手前でjquery.fit-sidebar.jsを読み込み

<script type="text/javascript" src="js/jquery.fit-sidebar.js"></script>

※jquery.jsの後に読み込んでください。

html

<div class="page-header"></div>
 
<div class="page-body">
  <div class="main">
    <div class="contents"></div>
  </div>
  <div class="sub">
    <div class="contents"></div>
  </div>
</div>
 
<div class="page-footer"></div>

javascriptの記述

jquery.fit-sidebar.jsを読み込んだ後に以下を記述します。クラス名はご自身のサイトの名前に変更してください。

<script type="text/javascript">
$('.sub .contents').fitSidebar({
  wrapper : 'div.page-body',
  responsiveWidth : 800
});
</script>

$()	サイドメニュークラスを指定します。例）`.sub .contents`
wrapper	大枠のクラスを指定します。例）`.page-body`
responsiveWidth	レスポンシブの場合サイドメニューが表示されるpxサイズを指定します。例）`800px`