position: sticky; を使って簡単にサイドバーを固定しよう!
Share
こんなことを説明しています!
- position:stickyを使ってサイドバーを追従させる方法
- position:stickyが効かないときの対処法
解説動画
コードの解説
HTMLの記述
<div class="inner"> <h1 class="title">position: sticky; を使って簡単にサイドバーを固定しよう!</h1> <div class="container"> <div class="article"> <div class="item"> <img src='./img/img1.jpg' alt='' width='1200' height='600' loading='lazy'> <p>メイン記事概要</p> </div> <div class="item"> <img src='./img/img2.jpg' alt='' width='1200' height='600' loading='lazy'> <p>メイン記事概要</p> </div> <div class="item"> <img src='./img/img3.jpg' alt='' width='1200' height='600' loading='lazy'> <p>メイン記事概要</p> </div> </div> <div class="sidebar"> <p>1. 固定したい部分</p> <p>2. 固定したい部分</p> <p>3. 固定したい部分</p> </div> </div> <div class="footer"> 別コンテンツ </div> </div>
CSSの記述
// ==================== // レイアウトを整えるcss // ==================== .inner { width: 100%; max-width: 1400px; margin: auto; padding: 0 40px; } .title { font-size: 40px; font-weight: 700; margin: 80px 0; text-align: center; } .container { overflow: hidden; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; .article { width: 70%; } .sidebar { width: 25%; } } .item { text-align: center; margin-bottom: 40px; img { width: 60%; } p { margin-top: 20px; } } .sidebar p { font-size: 20px; text-align: center; padding: 20px 0 100px; } .footer { height: 1000px; background: rgb(251, 184, 184); display: flex; justify-content: center; align-items: center; } // ==================== // 今回の内容 // ==================== .sidebar { position: sticky; top: 20px; background: rgb(199, 199, 255); }
position:stickyが効かない原因
ポイント1
・サイドバーの高さがメインコンテンツよりも短くなっているか確認!
▶︎追従したい要素(sidebar)に背景を塗ってみる
background: rgb(199, 199, 255);
▶︎横並びの他の要素と同じ幅以上になっていたらstickyは効かない!
▶︎今回はcontainerにalign-items: flex-start をつけているのでarticle より sidebarの方が短くなっている
▶︎ align-items: flex-start を外した状態だとこのようになるので
実質効いていない状態になる!
(align-items: flex-start や height: 100%などで高さを可変に)
ポイント2
・親要素にoverflow: hiddenを指定していないか確認!
▶︎ containerにoverflow: hidden を入れてみるとstickyが効いていないのが確認できると思います。