【クラス名を付けるだけ】ページをスクロールしてもサイドバーが切れないように固定する方法
kurubusi-fixed_column.js
最近よく見かけるようになりましたね。
ページをスクロールしていった際に、サイドバーが切れないようにブラウザに固定するテクニック。
OKWavwやフェイスブックも採用していますあれです。ページをスクロールしていって、メインカラムはあるけどサイドカラムは無いみたいな状態を避けるために、スクロールしていってサイドカラムの内容がなくなるとブラウザ下部とかにサイドカラムを固定するやつです。
説明が難し･･･なんか名前ないのかな･･･
広告を常に表示しておきたい時や、メニューや登録・問い合わせ等のアクションを促す動線を常に画面に表示しておきたい場合に有効です。
最近はシングルカラム等が多くなってきて、3カラムとかも少なくなってきましたが、せっかくなので3カラムでも対応できるようにしました。
特記する特徴
2カラムならクラス名を追加するだけ
スクリプトは読み込んでね…
3カラムでも両方のカラムが固定できる
最近少ないけど…
ブラウザのリサイズにも対応しているので、レスポンシブサイトでも大丈夫
スマホは基本サイドカラム無いので意識していません。
設置方法（2カラムの時）
1.スクリプトの読み込み
<head> … <script type="text/javascript" src="kurubusi-fixed_column.js"></script> … </head>
2.固定したいカラムにクラス名kfc_objを追加
<div class="kfc_obj"> … サイドバー … </div>
3.サイドバーが止まって欲しい位置のタグにクラス名kfc_cutを追加
（フッターじゃなくても、クラスを付けた部分が画面に表示される位置（高さ）でストップします。）
<footer class="kfc_cut"> … フッター … </footer>
これでOKです。
ダウンロード
サンプル
注意事項
仕様上の問題により、サイドバーのCSSで#wrapper .sidebar {}等のように、親に依存する書き方をしている場合、スクロールした際にスタイルが崩れる恐れがあります。
このスクリプトは、サイドカラムのクローンをbody直下に追加して、スクロール中はそちらをpositionで表示させています。ですので新しく出来たクローンの親はBODYになります。その為、CSSで親に依存する書き方をしている場合はCSSが効かなかったりします。すみません汗
3カラムの時は独自属性も追加します
1.スクリプトの読み込み
<head> … <script type="text/javascript" src="kurubusi-fixed_column.js"></script> … </head>
2.固定したいサイドバー1にクラス名kfc_objを追加して、独自属性data-kfc-grou="グループ名1"も追加します。
<div class="kfc_obj" data-kfc-grou="グループ名1"> … サイドバー1 … </div>
3.固定したいサイドバー2にクラス名kfc_objを追加して、独自属性data-kfc-grou="グループ名2"も追加します。
ストッパーになるフッター等とグループ化するための識別子として独自属性にグループ名を追加します。（サイドバー1のグループ名とは違う名前を付けて下さい） 図.3参考
<div class="kfc_obj" data-kfc-grou="グループ名2"> … サイドバー2 … </div>
4.サイドバー1が止まって欲しい位置のタグにクラス名kfc_cut、独自属性data-kfc-grou="グループ名1"を追加
（フッターじゃなくても、クラスを付けた部分が画面に表示される位置（高さ）でストップします。）
<footer class="kfc_cut" data-kfc-grou="グループ名1"> … フッター … </footer>
5.サイドバー2が止まって欲しい位置のタグにクラス名kfc_cut、独自属性data-kfc-grou="グループ名2"を追加
3カラムの場合に、右のサイドバーと左のサイドバーのストップさせたい位置が違う場合があるかもしれないので、グループ化してストッパーをそれぞれ選択できるようになっています。図.4参考
<footer class="kfc_cut" data-kfc-grou="グループ名2"> … フッター … </footer>
もしサイドバー1もサイドバー2も同じ位置（フッター等）で停止させたい場合は
<footer class="kfc_cut" data-kfc-grou="グループ名1 グループ名2"> … フッター … </footer>
と、半角スペースで区切ってグループ名を記入して下さい。
これでOKです。
基本的に3カラム以上に4カラム5カラムとかでも同じ形で設定して頂ければ動くはずです。
因みにIE8以下ではテストしていないので、IE8以下ではスクリプトを読み込まないようにしていただいたほうがいいかもしれません。（動けばラッキー）
WordPressに設置したいとき
1.スクリプトの読み込み
上記と同じ方法で、header.phpに直接書いてもいいんですが、ちょっとそれだと恰好が悪いので、テーマ内のfunction.php等でwp_enqueue_script関数を使って設置しましょう。
wp_enqueue_script関数で登録しておくと、header.phpのwp_head();で、他のスクリプト等と一気に吐出されるようになります。
function.phpに書けば問題ないんですが、大体のテーマはfunction.phpで既にいくつかのスクリプトを読み込むためにwp_enqueue_script関数を使っていると思いますので、その辺に追加すればスマートかなと思います。
wp_enqueue_script( 'kurubusi-fixed_column', get_template_directory_uri() . '/js/kurubusi-fixed_column.js');
後は既に説明したやり方でOK。
大体はsidebar.phpに固定したいサイドバーがあって、footer.phpにストッパーにしたいフッター等があるのかと思いますので、先ほどと同じ形でクラス名や独自属性を追加していってくださいね。