株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • CSS|ヘッダー固定やフッター固定も簡単! パララックス風もできるposition: stickyとは?④[追従するサイドバーを実装]
2023年5月18日
CSS|ヘッダー固定やフッター固定も簡単! パララックス風もできるposition: stickyとは?④[追従するサイドバーを実装]

これまで3回にわたり、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 ;を使用している場合
  2. 親要素にoverflow:visible以外(overlow: hidden ;やoverflow: scroll ;)が指定されている

  3. stickyを使用したい要素にdisplay: inline-blockを指定していると、Safariで効かなくなる
  4. また、position: sticky;は主要ブラウザでサポートされていますが、Safariではベンダープレフィックスを加える必要があります。

    以下、書き方です。

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

  5. position: sticky;を適用した要素の親要素に高さがない
  6. stickyは親要素の中で動くので、親要素の高さを指定しないと効きません。

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

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

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

  1. パララックス