見出し (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 が重なるとき 上に乗るのではなく 上にスクロールされていくので自然な動きになる