ブログデザイン備忘録～ position:sticky

　今回はスクロールに対して固定表示するバナーをCSSで作成する方法について紹介する。

スクロールに対して要素を固定するには、CSSのpositionをstickyとすることで実現できる。

HTMLの構造としてヘッダ-メイン(固定バナー/コンテンツ)-フッタという構成とする。さらにメインはsticky_containerの中にstickyと<p>本文</p>の構成とする。

<body>
  <header>
    <h2>ヘッダー</h2>
  </header>
  <div class="sticky_container">
    <h2 class="sticky">固定バナーのタイトル</h2>   
    <p>サンプルテキスト</p>
  </div>

  <footer>
      <h2>フッター</h2>
  </footer>
</body>

stickyクラスを固定するには、最低限以下のようにCSSを記述する。

.sticky {
  position: -webkit-sticky;
  position: sticky;
}

注意点としては、stickyクラスは親要素(sticky_container)を持つこと、親要素の方がサイズが大きいことなどがある。以下にCodePenで全体実装例を示す。スクロールに対してsticky要素がバナーとして固定されていることが確認できると思う。

See the Pen position_sticky by ATATAT (@atatat) on CodePen.

つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録～ position:sticky