jQueryプラグイン「Sticky-Kit」のコツ

スクロールに追従するサブメニューを作る時に便利なjQueryプラグイン「Sticky-Kit」。
使い方とコツを自分用にメモしておきます。

≫Sticky-Kit

##基本的な使い方

<script src="lib/jquery.min.js"></script>
<script src="lib/jquery.sticky-kit.min.js"></script>

<div id="box" class="clearfix">
  <div id="side">
    ～サブメニュー～
  </div>
  <div id="main">
    ～主コンテンツ～
  </div>
</div>

#box{
  width: 700px;
 /* clearfixの記述は面倒なのでここでは省略 */
}
#side{
  float:left;
  width: 200px;
}
#main{
  float:main;
  width: 500px;
}

$('#side').stick_in_parent();

##スクロールの上に余白が欲しい

初期状態ではウィンドウの一番上に固定されます。
しかしデザインによっては一番上は押しにくいものです。

offset_top で上からの余白を指定します。

$('#side').stick_in_parent({offset_top:20});

##2つ目のメニューだけ追従させたい

サイドバーの内容全てではなく、２個目のものだけをスクロールさせたい場合はひと工夫必要です。

<div id="box" class="clearfix">
  <div id="side">
    <div id="menu1">～１つ目のメニュー～</div>
    <div id="menu2">～スクロ－ルさせたいメニュー～</div>
  </div>
  <div id="main">
    ～主コンテンツ～
  </div>
</div>

この状態で下記のように実行すると、親エレメント「#side」の高さまでしかスクロールしてくれません。

ダメな例

$('#menu2').stick_in_parent();

parent で基準となるエレメントを指定してやります。

$('#menu2').stick_in_parent({parent:'#box'});

##スクロールの高さを再計算させる

記事内にサイズ指定のない画像が存在する場合、Sticky-Kitの初期化タイミングによっては画像の高さが計算に入りません。

イベント sticky_kit:recalc を実行することで再計算させます。

この例ではサブメニューのリンクをクリックする毎に再計算になります。
document.ready() や setInterval() で初期化タイミングを遅らせるのも有効でしょう。

$('#submenu a').click( function(){
  $(document.body).trigger('sticky_kit:recalc');
});