超簡単！CSSでサイドバーを追従させる方法

前回の記事でjQueryを使ってサイドバーを追従する方法をご紹介しました。

jQueryでサイドバーを追従させる方法

フッターやコンテンツエリアの位置情報を取得したり、面倒ですよね。

スクロールする度に起動されるので環境によっては重く感じることもあるかもしれません。

それが、CSSで簡単に出来るようなので実際に作ってみました。

CSSでサイドバーを追従させるコード

前回作成したjQueryで追従させるサンプルです。

[btn class=”simple”]jQueryで追従[/btn]

そしてCSSでサイドバーを追従するサンプルです。

[btn class=”simple”]CSSでサイドバーを追従[/btn]

HTMLはjQueryで追従のときと同じです。

jQueryは追従に関するものは削除しました。

CSSのサイドバー追従に関するものは以下の通りです。

#sidebar {
  width: 336px;
  float: right;
}

#sidebar h4 {
  margin-top: 0;
  margin-bottom: 10px;
  background-color: #04089b;
  color: #FFFFFF;
  padding: 5px 15px;
  cursor: pointer;
}
#sidebar .sidetextlist  ul {
  padding: 0;
  margin-top: 0;
}
#sidebar .sidetextlist li {
  list-style: none;
}

#sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
}

コードの解説

ぶっちゃけ追従させるために追加したコードは22～26行目の

#sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
}

だけです。

これを追加しただけで追従するようになりました。

jQueryで追従させるときに追加した position: fixed; や、position: absolute; は一切使ってないです。

普通に作成したサイドバーに上のコードを追加しただけです。

position: sticky;とは

では sticky ってなんなんでしょうか？

これは、top: 50px; などで指定した位置に来たら固定表示され、同列か上の階層のブロック要素が来たら上に押し上げられるというものです。

サイドバーの追従に関して言えば、そのために用意されたんじゃないか？と思うほど便利なものですね。

まとめ

jQueryは画面が重くなったりカクカクしたりするから出来るだけ多様しない。

CSS3で出来ることが大幅に増えたためCSS3で解決する場合はそちらを利用する。

position: sticky; は指定位置まできたら固定表示され、次のブロック要素がきたら上に押し上げられる。