スクロール演出(応用)
sticky追従ヘッダー
セクション見出しが position:sticky で上に張りつきながら、下のコンテンツがスクロールする。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
コード(コピーして使えます)
<div class="scroll-root">
<section class="sec">
<h2 class="sec-head" style="background:#2b50c7">Chapter 1</h2>
<ul class="sec-list">
<li>アイテム A</li>
<li>アイテム B</li>
<li>アイテム C</li>
</ul>
</section>
<section class="sec">
<h2 class="sec-head" style="background:#1a8c5b">Chapter 2</h2>
<ul class="sec-list">
<li>アイテム D</li>
<li>アイテム E</li>
<li>アイテム F</li>
</ul>
</section>
<section class="sec">
<h2 class="sec-head" style="background:#b5341e">Chapter 3</h2>
<ul class="sec-list">
<li>アイテム G</li>
<li>アイテム H</li>
<li>アイテム I</li>
</ul>
</section>
</div>
<div class="stack-hint">↓ スクロール</div>