【CSS】positionːstickyの使い方

2023年1月12日

CSSのpositionプロパティには、stickyという機能があります。これを使うことで、要素をスクロールしているときに、画面上部に固定するように指定することができます。

つまり、スクロールが進んでも、要素が画面上部に固定され、スクロールが戻ったときにも再び表示されます。

使い方は、positionプロパティに「sticky」を指定します。

.sticky-element {
    position: sticky;
    top: 0; /* 要素がスクロールするときに画面上部に固定する */
}

注意点として、sticky要素には必ずtop, bottom, left, right のいずれかのプロパティが必要です。それぞれ、スティッキー要素がスクロールしたときに、画面上部、下部、左部、右部に固定する場所を指定します。

.sticky-element {
    position: sticky;
    top: 20px;  /* 20px上から表示される*/
    left: 10px; /* 10px左から表示される*/
}

また、stickyは一部のブラウザではサポートされていないため、常に最新のブラウザで使用することを推奨します。

上記がstickyの使用方法です。これで、スクロールが進むにつれて要素が画面上部に固定され、スクロールが戻ったときにも再び表示されるようになります。