<!DOCTYPE html>
<html lang="ja">
<!-- 
 スティッキーのサンプル
 -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./style.css">
    <title>position:stickyのサンプル | Satoshi Nakano Portfolio site</title>
</head>

<body>
    <!-- メインイメージ -->
    <section class="block block-one ">
        <h1><img src="https://sat0512.sakura.ne.jp/sample/images/sample.svg" alt=sample></h1>
    </section>
    <section class="block block-two ">
        <h2><img src="https://sat0512.sakura.ne.jp/sample/images/sample.svg" alt=sample></h2>
    </section>
    <section class="block block-three ">
        <h2><img src="https://sat0512.sakura.ne.jp/sample/images/sample.svg" alt=sample></h2>
    </section>
    <section class="block block-four ">
        <h2><img src="https://sat0512.sakura.ne.jp/sample/images/sample.svg" alt=sample></h2>
    </section>
</body>
   @charset "UTF-8";
    /* 全体のスクロールをスムーズに */
    
    html {
        scroll-behavior: smooth;
    }
    /* 書式設定 */
    
    h1 {
        text-align: center;
    }
    
    h1 img {
        width: 100%;
    }
    
    h2 {
        text-align: center;
        font-size: 30px;
    }
    /* 各部分の共通設定 */
    
    .block {
        max-width: 980px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: -webkkit- sticky;
        position: sticky;
        top: 0;
    }
    
    .block-one {
        height: 800px;
        background-image: url(https://sat0512.sakura.ne.jp/sample/images/main.jpg);
        background-position: center;
        background-size: cover;
        color: #FFFEEE;
        z-index: 100;
    }
    
    .block-two {
        height: 800px;
        background-image: url(https://sat0512.sakura.ne.jp/sample/images/news.jpg);
        background-position: center;
        background-size: cover;
        color: #FAF0E1;
        z-index: 200;
    }
    
    .block-three {
        height: 800px;
        background-image: url(https://sat0512.sakura.ne.jp/sample/images/menu.jpg);
        background-position: center;
        background-size: cover;
        color: #FFFEEE;
        z-index: 300;
    }
    
    .block-four {
        height: 800px;
        background-image: url(https://sat0512.sakura.ne.jp/sample/images/about.jpg);
        background-position: center;
        background-size: cover;
        color: #2F2E2F;
        z-index: 400;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.