もはや今更な感じですが、よく見かけるスクロールしても付いてくるサイドバーを自分なりに使いやすく作ってみました。

$(document).ready() だと実行するタイミングが早くて、画像などの内容の読み込みが終わった状態の要素の縦幅を取得できない場合があるので $(window).load() を使うのがいいようです。

Test1 サイドバーだけ上固定

シンプルに上固定するタイプ。

• サイドバーを上を基準に固定
• メインコンテンツがサイドバーより短い場合は何もしない

テストページ

最初スクリプト側でマージンをつけていましたが、あとから弄るときに面倒臭そうだったので画面端に固定してCSS側で調整するようにしました。

Test2 サイドとメインどっちも対応したやつ

ちょっと色々凝ってみたもの。
上固定だとサイドバーが長い時一番下までスクロールしないと見れないので下固定にしました。

• サイドバーかメインコンテンツの短い方を固定
• 画面からはみ出る場合下を基準に固定、画面より小さい場合は上を基準に固定
• 折りたたみなどで動的に長さが変わった場合あとから簡単に補正

テストページ

ウィンドウや要素の高さが変わった場合はそのタイミングで$.fixedSidebar.refresh();すると補正します。
でもメインは短くても別に動かなくて良い気もする…。

レスポンシブにも対応させようかと思ったんですが、$.fixedSidebar.run();付近でごにょごにょ処理するぐらいでもいいかも…。

メインコンテンツの一番下にアドセンスとかあってメインの方が短い場合、サイドバーのスクロールが終わるまで意図しなくても表示固定になるのでもしかしたらまずいのかも‥？（流石にそこまでシビアじゃないと思いますけど(;'ω')）