【CSS】position: stickyを使ってボタンをfooterと被らずにスマホ下部に固定する方法

今回は、「position: stickyを使ってボタンをfooterと被らずにスマホ下部に固定する方法」について紹介します。

スマホの時にボタンを下部に固定してfooterと被らないようにする実装はよく出てくるので、是非理解しておきたいところですね。

【CSS】position: stickyを使ってボタンをfooterと被らずにスマホ下部に固定する方法

デモサイトはこちら。

See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.

デモサイトを下までスクロールしてみてください。

ボタンが固定され、footerのところまで来たら被らないようになっています。

HTML

<div class="wrapper">

    <header class="header">
        headerエリア
    </header>

    <div class="content">
        <p>コンテンツエリア</p>
        <p>コンテンツエリア</p>
        <p>コンテンツエリア</p>
    </div>

    <div class="sp-fixed">
        <div class="btn">
            <a href="">固定ボタン</a>
        </div>
        <div class="btn">
            <a href="">固定ボタン</a>
        </div>
    </div>

    <footer class="footer">
        footerエリア
    </footer>

</div>

ポイントは、固定したボタンパーツsp-fixedのコードをfooterの上に配置することです。

CSS

.sp-fixed {
  position: sticky;
  bottom: 0;
  left: 0;
}

固定したい要素に対して「potion: sticky;」を指定し、bottomとleftを0にすることで画面下部に固定されるようになります。

これでfooterの要素まで固定され、footerが表示されると固定されなくなります。

「potion: sticky;」は、overflowのhiddenやscroll、autoを直近の親要素に指定しているとスタイルが効かなくなるので注意してください。

まとめ

以上が、「position: stickyを使ってボタンをfooterと被らずにスマホ下部に固定する方法」でした。

関連記事:

【CSS】headerのテンプレート17個の紹介！ おみくじアプリを作成した【JavaScript】 【JS】固定headerを一定間スクロールしたら背景色を変える方法 【CSS】headerの下に背景画像を敷く方法