こんにちは、フリーランスエンジニアの太田雅昭です。

sticky

stickyはスクロールに追従させるときに使用します。「粘着」の意味のあるstickyですね。

要素に追従させる

任意の要素に追従する形です。ページ全体ではなく、途中からStickyするようにします。

See the Pen Untitled by 太田雅昭 (@MasaakiOta928) on CodePen.

必要項目

指定要素に追従させるには下記を指定します。

• parentのdisplay: flex
• position: sticky
• top などの位置情報
• align-self: flex-start

特にalign-selfを忘れてしまうことに注意です。align-selfがないと要素が広がってしまい、stickyがうまくいきません。

.container {
  display: flex;
}
.content {
  background: #cdf;
}
.sticky {
  position: sticky;
  top: 0;
  align-self: flex-start;
  background: #fdc;
}