スクロールに追従する枠を作成する - Sticky Position を利用したスクロール追従枠の作成 - CSS

Webページでスクロールに追従する枠のコードを紹介します。

概要

Webページでスクロールに追従する枠を作成するには、以前はJavaScriptなどで位置を制御する必要がありましたが、最近のWebブラウザでは、Sticky Position を利用することで容易にスクロールに追従する枠を作成できます。この記事では、Sticky を利用したスクロールに追従する枠の作成方法、コードを紹介します。

コード

下記のコードを作成します。

main.css

.header{
    background-color:#adcfe8;
    height:64px;
}

.footer{
    background-color:#b3bfc7;
    height: 680px;
}

.container{
    display:flex;
}

.LeftColumn {
    flex: 1;
    background-color: #e2d588;
    height: 1200px;
}

.CenterColumn {
    flex: 2;
    background-color: #dec05d;
    height: 1200px;
}

.RightColumn {
    flex: 1;
    background-color: #e1ad65;
    position:sticky;
    top:16px;
    height:180px;
}

main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="main.css" />
</head>
<body>
    <div class="header">
        ヘッダです。
    </div>
    <div class="container">
        <div class="LeftColumn">
            左カラムです。<br />
            A<br />
            B<br />
            C<br />
            D<br />
            E<br />
            F<br />
            G<br />
            H<br />
            I<br />
            J<br />
        </div>
        <div class="CenterColumn">
            中央カラムです<br/>
            あ<br />
            い<br />
            う<br />
            え<br />
            お<br />
        </div>
        <div class="RightColumn">
            右カラムです。<br />
            1<br />
            2<br />
            3<br />
            4<br />
            5<br />
        </div>
    </div>
    <div class="footer">
        フッタです。
    </div>

</body>
</html>