ここまで簡単にできると嬉しいですね！ 最近のWebサイトで見かけるサイドバーが追従するコンテンツですが、単純に位置が固定になるだけでなく、縦に長いサイドバーやフッターがある場合にも適切に動作させようと思うと多少工夫が必要です。 そんなデザインのサイトを実現したいと思ったならば使ってみたいjQueryライブラリがSticky Kitになります。使い方も簡単ですぐに使いこなせるはずです。 実際、コードは下記のメソッドを呼ぶ程度です。

$("#sidebar").stick_in_parent()

ね、簡単でしょ？実際の表示は次のようになります。

最初はこのように並んでいます。

サイドバーは左に残り続けたまま

フッターのところで一緒に上がっていきます。

他にも中央コンテンツでも利用できます。

サイドバーが長い場合も使えます。

オプションが幾つか指定できます。

  • parent : 親エレメント
  • inner_scrolling : 内部スクロールの有効無効
  • sticky_class : クラス名
  • offset_top : オフセット時のトップの値

になります。イベントも複数サポートされています。

  • sticky_kit:stick
  • sticky_kit:unstick
  • sticky_kit:bottom
  • sticky_kit:unbottom

ブラウザはHTML5をサポートした最近のブラウザに加えてIE7以上も対応しています。

実際にデモを試すと分かりますが、最初はサイドバーも一緒にスクロールして、サイドバーのコンテンツがなくなると追従モードになります。そしてメインコンテンツがなくなる時に一緒にスクロールするようになります。 こういったデザインは最近多いので、使い方を覚えておくとデザインの幅が広がりそうです。 Sticky KitはjQuery/JavaScript製、WTFPLのソフトウェアです。 Sticky-Kit | jQuery plugin for sticky elements leafo/sticky-kit