• HOME
  • CODE
  • CSSのみで要素を追従させる方法

2020/05/12 19:52

CSSのみで要素を追従させる方法

 

CSSだけで追従するサイドバーなんかを作れます。

めちゃくちゃ簡単ですのでぜひご利用ください。

グローバルナビなんかにも使えますね。

 

【CSS】

.sticky {

    position: sticky;

}

 

【HTML】

<div id="container">

  <!-- メイン -->

  <div id="main">

  </div>

  <!-- サイドバー -->

  <div id="sidebar">

  <!-- 追従要素 -->

    <div id="sticky"></div>

  </div>

</div>

 

ただしfloatを使うとバグる時があるのでご注意ください。

 

現場から以上です!

 

 

520