Sticky sections作ってみた

4232 ワード
CSS tech テキストリンク

Sticky sections作ってみた

・親要素にoverflow:scroll;をつける
・sitcky属性の兄弟要素が重なるとs上の方のstickeyが画面外に追い出される

main {
    height: 500px;
    width: 500px;
    overflow: scroll;
}

section {
    position: sticky;
    top: 0;
    height: 100%;
}

section:nth-child(1) {
    background-color: #464A79;
}

section:nth-child(2) {
    background-color: #EBDCA9;
}

section:nth-child(3) {
    background-color: #E34F30;
}

import React from 'react'
import './Hoge.css'

export const Hoge = () => {
    return (
        <>
            <main>
                <section>section</section>
                <section>section</section>
                <section>section</section>
            </main>
        </>
    )
}

結果

AGC 032 | A - Limited Insertion
Expressを使ってherokuでHPを公開