これまで3回にわたり、position: stickyでどんなことができるかを紹介しました。

• CSS｜ヘッダー固定やフッター固定も簡単！パララックス風もできるposition: stickyとは？①
• CSS｜ヘッダー固定やフッター固定も簡単！パララックス風もできるposition: stickyとは？②［パララックス編］
• CSS｜ヘッダー固定やフッター固定も簡単！　パララックス風もできるposition: stickyとは？③［ヘッダー、フッター編］

今回はposition: stickyを使用して、スクロールに合わせて追従するサイドバーを実装する方法を紹介します。

まずは、動きをご覧ください。

指定方法は簡単です。実装したい要素にposition: stickyと、固定したい位置を指定します。

aside｛
  position: sticky;
position: -webkit-sticky; /* Safari */
  top:0;
}

追従するサイドバーを実装します（HTML CSSは以下）。

HTML

          <header>
          ヘッダー
          </header>
         <div class="content-wrap">
          <main>
             <div class="content">
              コンテンツ1
             </div>
             <div class="content">
               コンテンツ2
             </div>
             <div class="content">
               コンテンツ3
             </div>
             <div class="content">
               コンテンツ4
              </div>
          </main>
          <aside>
            サイドバー
          「position: sticky;」
           </aside>
       </div>
          <footer>
          フッター
          </footer>

CSS

header {
background-color: rgb(232, 141, 152);
color: #fff;
height: 400px;
padding: 20px;
}
footer {
height: 400px;
padding: 20px;
background-color: rgb(73, 132, 63);
color: #fff;
}
/* 装飾のためのCSS */
p{
font-weight: bold;
color: aliceblue;
font-size: 2rem;
text-align: center;
}
.content-wrap{
display: flex;
}
aside {/* ここに指定 */
position: sticky;
position: -webkit-sticky; /* Safari */
top:0;
height: 400px;
padding: 20px;
background-color: rgb(181, 160, 70);
color: #fff;
flex:1 1 35%;
min-width: 250px
}
main{
flex:1 1 65%;
}
.content {
height: 250px;
background-color: #434b4b;
padding: 30px;
}

手順として、

1. main タグとaside タグをdivタグで囲みます。クラス名は任意で、今回はcontent-wrapにします。
2. mainタグとasideタグを横並びにしたいので、display:flexで横並びにします。
3. サイドバーを固定したいので、asideに「position: sticky」「top:0」を指定します。

これで、サイドバーはスクロールせず、コンテンツがスクロールし終わるまで上部に固定されています。

また、今回はブラウザーのトップにくっついているように見えますが、position: stickyは固定したい要素を囲っている直近の親要素にくっつきます。

どういうことかというと、例としてmainタグとasideタグを囲っている親要素に、高さとoverflow-y: scrollを指定してみてください。

※CSSのcontent-wrapにheight: 500px; overflow-y: scroll;を追加してみてください。

.content-wrap{
display: flex;
height: 500px;
overflow-y: scroll;

}

このように、ブラウザーのトップにつくのではなく、mainタグとasideを囲っている親要素「div class=”contant-wrap”」の上にくっついているのがわかりますね。

stickyが効かない場合と注意点

1. 親要素にoverflow: hidden ;を使用している場合

親要素にoverflow：visible以外（overlow: hidden ;やoverflow: scroll ;）が指定されている

2. stickyを使用したい要素にdisplay: inline-blockを指定していると、Safariで効かなくなる

また、position: sticky;は主要ブラウザでサポートされていますが、Safariではベンダープレフィックスを加える必要があります。

以下、書き方です。

position: -webkit-sticky; /* Safari */

3. position: sticky;を適用した要素の親要素に高さがない

stickyは親要素の中で動くので、親要素の高さを指定しないと効きません。

4. topを指定していない

position: sticky;は、貼り付ける位置（top, left, right, bottom）を指定しないとうまく動きません。

left, right, bottomを指定しない場合でも、「top:0」は一緒に指定してください。

position: stickyはさまざまな場面で使用できるので、ぜひ使ってみてください。