サイドバーをスクロールに合わせて追従させるプラグインです。 前半はプラグインの解説なので、お急ぎの方はすっ飛ばしてください。

開発の経緯

採用しているサイトも多いのですが、どれも微妙に求めているものと違うんですよね。 例えばこれ。
followMeSidebarJS
最下部までは良し。問題はそのあとの固定のタイミング(①)。違う。ここで固定しちゃだめ。 ここで固定してしまうとウィンドウからはみ出した部分(②)を見るためには、メインコンテンツの最上部までスクロールしなければならない。メインコンテンツのボリュームが多ければ多いほど面倒くさいことになる。 もうひとつ。
followMeSidebarJS_02
これは最初の固定(①)がイケない。 これもメインコンテンツの最下部までスクロールしないとサイドバーのウィンドウからはみ出している部分(②)を見ることができない。

アルゴリズム

というわけでまずはアルゴリズムを考えてみる。 サイドバー、ウィンドウ、上下移動するサイドバーが可動範囲の基準とするボックス(以下、可動範囲) それぞれの高さの関係によって3パターンの挙動がある。

1パターン目

「サイドバーがウィンドウと可動範囲に収まっている」
followMeSidebarJS_03
下図の青枠が指すように、可動範囲より下のコンテンツ(この場合footer)とサイドバーが同時にウィンドウに収まる場合はウィンドウ上部固定のみになる。
followMeSidebarJS_04

2パターン目

「サイドバーはウィンドウを超えているが、可動範囲には収まっている」 もっとも処理が複雑なのはこのパターン。
followMeSidebarJS_05

3パターン目

「サイドバーが可動範囲を超えている」 固定・固定解除の処理は一度もない。
followMeSidebarJS_06

仕組み

followMeSidebarJS_07

デモ

http://www.560designs.com/demo/follow-me-sidebar-js/

ダウンロード

GitHub:https://github.com/YuyaHoshino/FollowMeSidebarJS

使い方

実行コードの例

$('[追従対象のセレクター]').followMeSidebar({
    area:'#main',
    device:640,
    flag:"$flag"
});

パラメータ

area 可動範囲の基準となる要素のセレクターを指定。 デフォルト:body
device デバイスの横幅を指定する。 指定した数値より上のデバイスサイズでのみ動作させる。 デフォルト:false
flag 真偽値を返すオブジェクトを指定。 オブジェクトがtrueを返すのを待ってから処理を開始する。 可動範囲やサイドバーの高さが別のJSで調整される場合などに利用できます。 デフォルト:true

マークアップ

追従させたいボックスの内側に新たにボックスを追加してそれを動かしているので、背景やボーダーを追従させたいボックスに指定しても置いていかれます。

動作環境とライセンス

jQuery 1.12.0 で開発。それ以下は確認していないのでわかりません。 ライセンスはMIT Licenseです。