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

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

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

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

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

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

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

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

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

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

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

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

コードの解説

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

だけです。

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

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

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

position: sticky;とは

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

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

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

まとめ

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

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

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

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA