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

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

Fit sidebar

<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