LoginSignup
23

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-04-13

スクロールに追従するサブメニューを作る時に便利な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つ目のメニューだけ追従させたい

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

<div id="box" class="clearfix">
  <div id="side">
    <div id="menu1">~1つ目のメニュー~</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');
});

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23