スクロール後要素を固定するposition: sticky;
スクロールで動き、要素を固定するposition: sticky;
- stickyを適用した要素はスクロールに応じて追従するように動き、指定した位置に固定することができます
- positionプロパティはstickyの他にも下記の4つがあります
- relative
- absolute
- static
- fixed
position: sticky;の使い方
- positionプロパティは、要素の配置を指定するプロパティで初期値はstaticです
- stickyを適用した要素はスクロールに追従するように動き、親要素のボックス内の指定した位置に固定表示することができます
セレクタ { position: sticky; top: 0; }
- positionプロパティは「top」「right」「bottom」「left」の4つのプロパティと合わせて要素の配置を指定します
- stickyの場合、最低限topを指定するようにします
- topを指定しないと、stickyがうまく動作しません
- position: sticky; を適用した要素は、スティッキーアイテムといいます
- position: sticky; が適用された要素の「親要素」は、スティッキーコンテナといいます
