Chrome の現バージョン 116 で DevTrial です
https://chromestatus.com/feature/5072263730167808

詳しい説明
https://lilles.github.io/explainers/state_container_queries.html

position: sticky でスクロールしたときに要素を簡単に固定できるようになりましたが 固定されてるときだけスタイルを変えたいということはよくありました
それができるようになります

使い方はコンテナクエリを使って

@container state(stuck: top) {
  #sticky-child { font-size: 75% }
}

のようになるそうです

HTML の例だと

<style>
#sticky {
  container-name: my-menu;
  container-type: sticky;
  position: sticky;
  top: 0px;
  height: 100px;
}

#sticky-child {
  background-color: orange;
  color: white;
  height: 100%;
}

@container my-menu state(stuck: top) {
  #sticky-child { width: 50%; }
}
</style>
<div id="sticky">
  <div id="sticky-child">
    Sticky
  </div>
</div>

できるようになるのは嬉しいのですが 少し手間なのが難点ですね
コンテナクエリが必須ですし contaner-type の指定も必要です

お手軽に擬似クラスで :stuck でいいと思うのですが パフォーマンスの懸念など色々あってコンテナクエリになったようです

見出し (sticky)

本文
本文
本文

見出し (sticky)

本文
本文
本文

の繰り返しがあるとき コンテナ要素の背景がグラデーションになってると 綺麗な表示にできない
sticky で上に張り付いているとき 非 sticky 要素は sticky 要素と重なってスクロールしていく
背景が透明だと重なって見えてしまうので そう見えないように通常は sticky 要素に背景色を指定する

sticky 要素が背景のグラデーションを無視した固定色なら単純に background-color 指定するだけ
でも背景のグラデーションを維持したい場合はスクロール位置に応じて背景色を後ろに合わせたグラデーションに揃えることになって現実的じゃない
透明にするのじゃなくて 裏側の色をコピーしてくる機能がほしい

見出し (sticky)

本文
本文
本文

見出し (sticky)

本文
本文
本文

の繰り返しがあるとき 下にスクロールして 3 つ目の見出しがついてきてる状態では 3 つ目だけじゃなくて 1 つ目と 2 つ目もついてきてる
それらが重なっていて 一番上に 3 つ目があるから 3 つ目だけがついてきてるように見えるだけ

これは同じ高さならいいけど 2 つ目の見出しが長くて折り返しが入って高さが大きくなると 3 つ目がついてきてるときに 2 つ目のはみ出た分が見えてしまう

<style>
	.container {
		overflow: auto;
		width: 200px;
		height: 200px;
	}
	.head {
		position: sticky;
		top: 0;
		color: white;
	}
	.body {
		height: 300px;
	}
	.red {
		background: red;
	}
	.blue {
		background: blue;
	}
	.green {
		background: green;
	}
</style>

<div class="container">
	<div class="head red">1</div>
	<div class="body">body</div>
	<div class="head blue">2<br/>2-2</div>
	<div class="body">body</div>
	<div class="head green">3</div>
	<div class="body">body</div>
</div>

固定中の要素の前の固定中の要素は非表示にできるといいけど 現状の CSS ではそういうことはできないので 高さを揃えるか　JavaScript でがんばるしかなさそう

---

[追記]

フラットにせず sticky にしたいものを区切りにして div で囲めれるなら囲むだけでそれだけで対処できた

<style>
	.container {
		overflow: auto;
		width: 200px;
		height: 200px;
	}
	.head {
		position: sticky;
		top: 0;
		color: white;
	}
	.body {
		height: 300px;
	}
	.red {
		background: red;
	}
	.blue {
		background: blue;
	}
	.green {
		background: green;
	}
</style>

<div class="container">
	<div>
		<div class="head red">1</div>
		<div class="body">body</div>
	</div>
	<div>
		<div class="head blue">2<br/>2-2</div>
		<div class="body">body</div>
	</div>
	<div>
		<div class="head green">3</div>
		<div class="body">body</div>
	</div>
</div>

sticky でついてくる状態は内側 div の範囲になる
直後の 「body」 が表示されてる間はついてくるけど内側 div がスクロールされ画面外にいくと ついてこなくなる
sticky と次の sticky が重なるとき 上に乗るのではなく 上にスクロールされていくので自然な動きになる