position: sticky の解説：flexboxでbottom側に固定する方法

position: sticky の仕様

position: sticky は、要素が指定した位置に到達すると、その場所に固定されるCSSプロパティです。この機能は、ナビゲーションバーやサイドバーなど、スクロールしても常に表示される要素を作る際に非常に便利です。ただし、この固定効果は、要素の親要素内でのみ有効であり、親要素を超えてスクロールすると sticky の効果は失われます。

position: sticky の使い方

position: sticky を正しく機能させるためには、必ず位置を指定するプロパティ（top、bottom、right、left のいずれか）を設定する必要があります。これが指定されていない場合、要素はスクロールに対して固定されません。

例えば、次のコードでは top: 50px; を指定しています。この指定により、要素はスクロールしても常に画面上部から50pxの位置に固定されます。

<div class="container one">
  <div class="main">
    <p>
      <!-- 長いダミーテキスト -->
    </p>
  </div>
  <div class="side">
    <div class="sticky">
      <p>
        position: sticky;<br />top: 50px;<br /><br />border: 1px solid
        black;
      </p>
    </div>
  </div>
</div>
<div class="container two"></div>

.container {
}

.one {
  display: flex;
}

.main {
  width: 80%;
}

.side {
  width: 20%;
}

.sticky {
  position: sticky;
  top: 50px;
  width: 100%;
  border: 1px solid black;
}

.two {
  height: 100vh;
  border: 1px solid black;
}

bottom を指定する際の問題とその解決策

position: sticky で top を指定する場合は問題なく動作しますが、bottom を指定した際に要素が正しく貼り付かないことがあります。これは、祖先要素でdisplay: flex; を指定した場合に、sticky 要素がデフォルトで top 側に配置されるためです。

この問題を解決するためには、align-self: flex-end; を使用して、要素を親要素の bottom 側に配置するようにします。以下にその具体例を示します。

.container {
}

.one {
  display: flex;
}

.main {
  width: 80%;
}

.side {
  display: flex;
  width: 20%;
}

.sticky {
  position: sticky;
  bottom: 50px;
  width: 100%;
  align-self: flex-end;
  border: 1px solid black;
}

.two {
  height: 100vh;
  border: 1px solid black;
}

このコードを使用することで、bottom を指定した場合でも要素が期待通りにスクロールに固定されるようになります。