positionプロパティのstickyの使い方と注意点です。divタグに以下のCSSを適用して動作を確認します。

.div01 {
  position: sticky;
  top: 0;
}

デモページはこちら

positionプロパティのstickyは以下の特徴があります。

要素の高さ（フロートするか）

static、relative：要素に高さがあるためフロートしません。
absolute、fixed：要素に高さがないためフロートします。
sticky：要素に高さがあるためフロートしません。ただし指定位置（top、leftプロパティ）の条件を満たすと、要素の高さがなくなりフロートします。

位置指定時（top、leftプロパティ指定時）の基準要素

static、relative：通常配置される位置が基準となります。
absolute：relativeを指定した親要素が基準となります。
fixed：ウインドウ全体が基準となります。
sticky：ウインドウ全体が基準となります。

sticky使用時の注意点

・位置指定（top、leftプロパティ）が必要です。ウィンドウ全体からの位置が指定されていないと、ページスクロール時に指定位置の条件が満たせず要素が追従しません。

デモページはこちら

・親要素にoverflow: hidden;が指定されている場合、ページスクロール時に要素が追従しません。

デモページはこちら

・ページスクロール時、親要素の高さの範囲内で要素が追従します。親要素の高さとstickyを指定した要素の高さが同じ場合は追従しないので注意が必要です。

デモページはこちら

・stickyを指定した要素の高さがウィンドウの高さを超えた場合、ページスクロール時にウィンドウの高さを超えた部分が表示できません。一番下までスクロールすると表示されます。

デモページはこちら