[css]スクロールしたらレイヤーが被ってくる感じに見えるやつを作る方法

どういうことか

要するにこれ。

表示されたらスクロールしてチェック。

仕組み

html

<div class="wrap">
    <div class="set"></div>
    <div class="set"></div>
    <div class="set"></div>
    <div class="set"></div>
    <div class="set"></div>
    <div class="set"></div>
    <div class="set"></div>
</div>

css

    .set{
        height: 100vh;
        position: sticky;
        top: 0;
        background: #fff;
    }

stickyのおかげで.setが重なるようになってる。

.setに背景色を付けているから、スクロールしたらレイヤーが被る感じで上がってくる。

知ってしまえば大したことはしてない。

注意点

必ず画面いっぱい（100vh）の領域を持たせる必要がある。

高さが足りなければ手前のコンテンツがチラ見えしてしまう。

高さが100vhを超えてしまうと全体が表示できないまま次のコンテンツが表示されてしまう。

だから、行き当たりばったりで組むと痛い目を見る。

レスポンシブが当たり前になってるので、状況によって表示がぶっ壊れるリスクがある。

ちゃんと考えて作らないといけない。

基本的に余白たっぷりの洒落っ気の聞いた感じのデザインを目指す感じじゃないと扱いの難しい手法。

100vhを超えたやつを挟みたい場合

表示領域を100vhに限定するならいいんだけどさ。

100vhを超える場合にすごいめんどくさい。

<div class="wrap">
    <div class="set"></div>
    <div class="set"></div>
    <div class="set"></div>
    <div class="set"></div>
    <div class="set long"></div>
    <div class="set"></div>
    <div class="set"></div>
</div>

    .set{
        height: 100vh;
        position: sticky;
        top: 0;
    }
    .set.long{
        height: 160vh;
        top: calc((160vh - 100vh) * -1 );
    }

長い要素の次のやつが被るようにするには、長い要素のtopの位置を調整する必要がある。

要素の高さから100vhを引いた値をマイナスで設定することになる。

こうすることで長い要素の末端が画面下部に来たところで要素自体のスクロールが終わり、次の要素が被ってくるようになる。

多分、こういう状況は高さを実数で指定することは無理だと思うから、実際はjsでtopを付与するのがいいですね。