ちいつる

スクロール演出(応用)

sticky追従ヘッダー

セクション見出しが position:sticky で上に張りつきながら、下のコンテンツがスクロールする。

ENGLISH

Sticky Section Headers

  • CSSのみ
74スクロール演出(応用) の一覧 →

プレビュー

スクロール

操作枠内をスクロールすると動きます。

コード(コピーして使えます)

<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>

タグ

関連パーツ