sticky-kitを使ってサイドバーの2つ目のみをついてくるようにする方法と諸問題の解決と解説

jQueryのプラグインsticky-kitを使えばサイドバーなどが、画面についてくる様にすることが出来るプラグインです
導入はとても簡単です、そこでもう一工夫を加えて使い方を紹介します

sticky-kitで2段目（2つ目）のサイドバーのみをついてくるようにする方法

stiky
CONNTENの大きさが大体MAINの大きさとなることが多いですので
その大きさの一番下までSIDE2が移動します

stiky3

ソースの一部

ヘッダーでプラグインの読込
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.sticky-kit.min.js"></script>
</head>

HTML本文
<div class="main">
    <div class="content"><h3>コンテンツエリア</h3></div>
    <div class="side-1">サイドバー1</div>
    <div class="side-2">サイドバー2</div>
</div>

スクリプト
<script>
$(".side-2").stick_in_parent();
</script>

SIDE2だけを移動させようと思うと、CONTEN、SIDE1、SIDE2すべてがMAINの直接の子要素でなくてはなりません
なのでSIDEでSIDE1とSIDE2をまとめてしまうと、SIDE2の親はSIDEになってしまいます

今回はCONTEN+SIDE1の幅をMAINと同じ幅にすることで、float:leftでCONTENTがSIDE1よりも高さがある場合
自動的にSIDE1の下に来るようになります

ここで一つ問題が
CONTENがSIDE1よりも小さい時、SIDE2がCONTENTの下に来てしまう問題

stiky4

（MAIN自体の高さも変わります）

こういう場合には、jQueryを使ってSIDE1の高さ+SIDE2の高さを求めて
それをCONTENTの高さにしてしまいます
この時は固定値にするとCONTENTがSIDE1+SIDE2の時よりも大きい時にコンテンツが途切れてしまうので
min-heightを使います

stiky5

デモページ 2

スクリプトに高さを合わせるのを追加

var h = $(".side-1") . height();
var h2 = $(".side-2").height();
$('.content').css("min-height",h+h2);
$(".side-2").stick_in_parent();

これでサイドバーより短い場合には、min-heightでCONTENを同じ高にすることが出来レイアウト
短い時のレイアウトの崩れは無くなります

これだと、まだ問題があります。
javascriptを使っていないブラウザだと、CONTENTが短い場合レイアウトは崩れたままになります

javascriptが有効ではない時でもレイアウトを崩さずにする方法

stiky6

サイド自体を一つの塊にして、そのなかでSIDE2を動かしてしまおうという考え方です
この場合はCONTENTがSIDEよりも短くてもレイアウトは崩れません

この場合、SIDE2の親要素がMAINからSIDEに変わりますので
そのままでは使えません

そこで先ほどやった、SIDE1+SIDE2の高さをCONTENTの高さにするという発想を逆にして
CONTENTの高さをSIDEの高さにする

同じくmin-heightを使うことで、CONTENTの方が短くても影響は出ません

デモページ3

SIDEを追加し、高さを求める部分を変更

<div class="main">
    <div class="content"><h3>コンテンツエリア</h3></div>
    <div class="side">
        <div class="side-1">サイドバー1</div>
        <div class="side-2">サイドバー2</div>
    </div>
</div>

スクリプト
<script>
var h2 = $(".content").height();
$('.side').css("min-height",h2);
$(".side-2").stick_in_parent();
</script>

追記：親要素を直接指定するもっと簡単な方法がありました
こちらで別に書きました