position:stickyで画面に貼り付けよう!

WEBサイトを作る場合、ヘッダやフッタの要素を固定したりする事があると思います。完全に固定してしまう場合はposition:fixedを使って画面上に固定してしまうと思うのですが、流れでちょっとしたナビゲーションを固定したい、メニューだけ固定させて後はスクロールさせたいなど、特殊な固定要素を使いたい場合にはposition:stickyが便利です。
このposition:stickyの使い方などをさくっと解説します。

使い方

サンプルとしてHTMLとCSSを用意しました。

HTML

<div class="box">
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためのテキストです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためのテキストです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためのテキストです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためのテキストです。</p>
</div>
<div class="header">
  <p>header</p>
</div>
<div class="box">
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためのテキストです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためのテキストです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためのテキストです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためのテキストです。</p>
</div>
<div class="footer">
  <p>footer</p>
</div>
<div class="box">
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためのテキストです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためのテキストです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためのテキストです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためのテキストです。</p>
</div>

CSS

.box {
  padding: 10px;
  background: #fff;
}

.box p {
  padding: 10vh 0;
}

.header {
  position: sticky;
  top: 20px;
  padding: 10px;
  background: #bbd3f7;
}

.footer {
  position: sticky;
  bottom: 0;
  padding: 10px;
  background: #f0a652;
}

こんな感じのサンプルを用意しました。

上下に張り付くsticky

基本的にposition:stickyは上か下にしか張り付きません。
そのため、position:stickyを固定させるためにはtopとbottomのどちらかを指定します。topとbottomの使い方自体は全く同じです。0を指定すれば画面端にピッタリ固定されます。

上に張り付くように設定した場合の動作

position:stickyをtopに張り付くよう指定した場合の動作はこのようになります。
まず、上から下へスクロールしていく場合、画面内に入ってくるまでは普通の要素としてスクロールします。
そして、上へ消えるタイミング、topに指定された数値で上に固定されます。その後はどんなに下へスクロールしても上に張り付いたままです。
逆に、上の方へスクロールして普通に設置された場所から上へ戻ると、また普通の要素に戻ってスクロールしていきます。

下に張り付くように設定した場合の動作

position:stickyをbottomに張り付くように指定した場合の動作はこのようになります。
要素が画面外の場合は、画面が表示された段階で画面の下（bottomで指定した位置）に張り付いた状態で表示されます。
そのまま下へスクロールして行き、本来の要素の位置に到着したら張り付くのをやめて普通にスクロールするようになります。
もちろん、上へスクロールして本来の要素が隠れてしまえばまた所定の場所に固定されるようになります。

こんな時に使いたい

メニューだけ上に貼り付けたい

ヘッダが大きくなりすぎた場合など、メニュー部分だけstickyで固定し、あとはスクロールさせてしまえば、必要なものだけ固定されるスッキリしたメニューを作ることが出来ます。

一番下にある項目へのリンクを作る

例えば一番下にお問合せフォームがある場合など、画面下にお問合せフォームへのページ内リンクを貼り付ける時にstickyで貼り付けておくと、お問い合わせフォームに来たときは画面下への張り付きが終了してお問い合わせ部分に来たことが視覚的に分かるようにすることが出来ます。

最後に

このように、タグをうまく使うと簡単に動きのある表現ができるようになります。色々使ってベストなデザインを作りたいですね。

もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！