position: sticky;が効かないときの対応

position:stickyを使ってサイドバーをスクロールで上部に固定しようとしてうまくいかない場合の対応メモ。

gridの場合

CSS Gridは、align-items のデフォルトが strecth のため、align-items を設定していないとカラムの高さが揃っている状態です。
そのためスクロールしても上部に固定されません。
1度背景に色をつけてみると、どういう状態になっているかわかりやすいかも。

親要素で設定する

align-items を start にする。

.wrapper {
　　display: grid;
　　grid-template-columns: 2fr 1fr;
　　align-items: start;
}

子要素で設定する

または子要素の align-self を start でも可。

.sub {
  align-self: start;
}

Flexの場合

Flexboxの場合も同様で、align-items のデフォルトが strecth でカラムの高さが揃っているのが原因なので、align-items または align-self を設定します。

親要素で設定する

.wrapper {
　　display: flex;
　　align-items: flex-start;
}

子要素で設定する

.sub {
  align-self: flex-start;
}