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

Columnコラム
  • TOP
  • コラム一覧
  • CSS|ヘッダー固定やフッター固定も簡単!パララックス風もできるposition: stickyとは?②[パララックス編]
2023年5月8日
CSS|ヘッダー固定やフッター固定も簡単!パララックス風もできるposition: stickyとは?②[パララックス編]

前回、CSSのposition: stickyの紹介をしました。今回は、CSSのposition: stickyを使用してパララックス風の動きを再現してみたいと思います!

まずはデモをご覧ください。

指定は簡単です。親要素で囲った子要素にposition: stickyと、スクロールした際に固定したい位置を指定します。

.セレクタ{

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

}

HTML

 

     <body>
            <div class="block img">
              <img src="https://autoproject.nagoya/wp-content/uploads/ap-0-scaled.jpg"></img>
            </div>
            <div class="block content1">
              <p>コンテンツ1</p>
            </div>
            <div class="block img">
              <img src="https://autoproject.nagoya/wp-content/uploads/ap-1-scaled.jpg"></img>
            </div>
            <div class="block  content2">
              <p>コンテンツ2</p>
            </div>
            <div class="block img">
              <img src="https://autoproject.nagoya/wp-content/uploads/ap-2-scaled.jpg"></img>
            </div>
            <div class="block content3">
              <p>コンテンツ3</p>
            </div>
            <div class="block img">
              <img src="https://autoproject.nagoya/wp-content/uploads/ap-4-scaled.jpg"></img>
            </div>
            <div class="block content4">
              <p>コンテンツ4</p>
            </div>
          </div>
        </body>

CSS

.block {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;/* ここに指定 */
  position: -webkit-sticky;/* Safari用 */
  top: 0;/* 固定位置は必ず指定 */
}
p{
  font-weight: bold;
  font-family: 'Great Vibes', cursive;
  color: aliceblue;
  font-size: 3rem;
}

img{
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.content1 {
  background-color: #72b7b9;
}
.content2{
  background-color: rgb(183, 161, 101);
}
.content3 {
  background-color: rgb(205 150 109);
}
.content4 {
  background-color: rgb(97 126 81);
}

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

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

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

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

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

以下、書き方です。

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

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

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

    1. topを指定していない

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

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

次回は、position: stickyを使用してフッター、ヘッダーを固定する方法を紹介します。

  1. パララックス