HTML/CSS

【要素を固定したい】position: stickyを使って要素を固定する

position: stickyを使って要素を固定してみよう!

「position: sticky;」を指定したものをスティッキーアイテム、スティッキーアイテムを囲う親要素をスティッキーコンテナと言います。
※「position: sticky;」を指定すると、自動的に親要素がスティッキーコンテナとして定義されます。

  • スティッキーアイテムは「position: sticky;」を指定した場所
  • スティッキーコンテナは「position: sticky;」を指定した親要素
  • スティッキーアイテムスティッキーコンテナ内でしかフロートできない

固定したい要素に「position: sticky;」を指定

固定したい要素に「position: sticky;」を指定したら、その要素がどの位置にきたら固定するのかを指定します(以下top: 20pxで固定の例)。

<section class="sticky-container">
   <div class="sticky-item">固定</div>
</section>
//スティッキーコンテナ
.sticky-container{
    background: #E3D384;
    height: 4000px; //サンプルのため高さ多めにとってます
}

//スティッキーアイテム
.sticky-item{
    background-color: #2F3C75;
    position: sticky; //親要素の可動域で動作する
    top: 20px; //どのタイミングで固定するか
}

 

すると、以下例のようにTop20pxの位置で「スティッキーアイテム(青丸)」が固定されます。

いちごぱんつ
いちごぱんつ
試しにスクロールしてみてね!

See the Pen
sticky_item
by Siroari (@ichigo-pantsu)
on CodePen.

position:stickyのブラウザサポート

親要素に「overflow:hidden」があるとposition: stickyは効かないので注意!

実際にposition: stickyを使ってみよう!

スクロール各ブロックをtop0の位置で止まるようにしてみる

以下例は、スティッキーアイテム(子)に「position: sticky; 」「top: 0;」を設定しています。(詳細はcssの.block部分を参照ください)
「.block-1」〜「.block-5」は「z-index: 100」〜「z-index: 500」を設定して、各ブロックのレイヤーが上に重なっていくようにしています。

See the Pen
sticky01
by Siroari (@ichigo-pantsu)
on CodePen.

別々のスティッキーコンテナ(親)で梱包してみる

スティッキーアイテム(子)は、スティッキーコンテナ(親)内でしかフロートすることが出来ません。
その特性を生かして「1」「2」「3」「4」「5」「6」を別々のスティッキーコンテナ(親)で梱包してみました。

よって、「3」がtop0で止まらず、「4」から止まるように見せることができます。

See the Pen
sticky02
by Siroari (@ichigo-pantsu)
on CodePen.