追従するサイドバー

追従範囲を指定したサイドバーです。
resizeした時にも対応させていますので、サイドバーが突き抜けることはありません。
デモではわかりやすく各要素にheightを指定しています。

追従している時は.sideにfixedというクラスを、追従をやめたら.sideにstopというクラスが付きますのでstyle変更も容易です。

デモページ

HTML

CSS

javascript(jQuery)

スクロールの値に応じて3段階に分ける

最初~header通過まで

最初は追従せずに、そのまま表示。

header通過~footer上30pxまで

headerを過ぎたらposition:fixedで追従させる。
side.offset().top;でsideのtop位置を取得できます。
この領域に来たら.sideInnerにfixedのclassを付けます。

footer上30pxから~最後

このままfixedだと突き抜けてしまうので、footer上30pxまで来たら追従をストップしたい。
ブラウザの一番上から、footer上30pxまでの高さが分かればいい。
今回はsideの高さ + sideのtop開始位置 – ( sideInnerの高さ + sideのpadding-bottom:30px + .sideInner.fixedのtop:30px分 )で計算しました。
sideのpadding-bottom:30pxと、追従しているときに.sideInnerのtopを30px開けていますので、2つ合わせて60pxです。

cssで.containerはdisplay:tableに、.mainと.sideはdisplay:table-cellにしてあるので、高さを求めるのが容易です。
この領域に来たらs.ideInnerにstopのclassを付けます。
また.sideはdisplay:table-cellのため、vertical-alignを使えますのでbottomにして下揃えにします。

デモページ

  • コーダーのための計算機