CSSのposition:stickyの使い方と効かないケースを解説

position:stickyは、スクロールに応じて要素を固定させることが出来るcssのプロパティです。

昔はJavaScript(jQuery)を駆使して実装していましたが、今はcssのみでお手軽に導入できます。

以前に紹介したハンバーガーメニューの記事でも、cssの「position:sticky」を使用していました。

CSSのみで作る追従ドロワーメニュー【jQuery不要】
jQuery不要で、HTMLとCSSだけで追従するドロワーメニュー(ハンバーガーメニュー)を実装する方法についてまとめました。

今回は「position:sticky」の仕様と使い方をご説明します。

position:stickyの仕様について

position:stickyの最もポピュラーな使い方として、上部追従を例に説明します。

特定の要素を、「その親要素の範囲内で見えなくなるところまでスクロールしたら上部に固定する」、といった処理を行いたい場合は、cssではこう書きます。

<style>
.sticky-area h2{
    position: -webkit-sticky; /* safari用 */
    position: sticky;
    top: 0;
}
</style>

<div class="sticky-area">
    <h2>見出し1</h2>
</div>

※この記事でも見出しタグ(h2)に同様の記述を施しています。実際の動きを確認してみてください。

「position:sticky」が指定された要素は、親要素のスクロールが見えなくなるところまでスクロールしたら、「position:fixedとtop:0」が適用される、といえば分かりやすいでしょうか。

スクロールするまではただの要素で、スクロール後に固定される要素に切り替わる柔軟な動きが、オプション1つで実現できます。

position:stickyの対応ブラウザ

「position:sticky」を2019年8月時点で91%のブラウザが対応しています。

参考 Can I use

日本としてはIEが一切サポートされていないのが気になるところですが、IEは今後MicroSoft Edgeへの移行をすすめているので、シェア率は今後下がっていくでしょう。

また、仮にサポートしていなくても、ただ追従しなくなるだけで表示がおかしくなることはないので、追従に機能の大部分を依存しない限りは、積極的に採用しても問題ないと思います。(個人的には)

position:stickyが効かないケース

position:stickyが効かないケースとして、親要素(先祖要素含めて)の「overflow」「overflow-x」「overflow-y」プロパティが「visible(初期値)」以外が指定されているケースです。

例えば、scrollやhiddenなどの値が指定されている場合は、stickyによる追従が起きません。

<style>
.sticky-area{
    overflow: scroll;
}
.sticky-area h2{
    /* 効かない */
    position: -webkit-sticky; /* safari用 */
    position: sticky;
    top: 0;
}
</style>

<div class="sticky-area">
    <h2>見出し2</h2>
</div>

追従されない場合は、先祖要素を含めた親要素のプロパティをチェックしてみるのが良いでしょう。

大きく改修が必要な場合は、jQueryを使用して親要素のoverflowを一括でvisibleに置き換えるのもアリです。

<script>
$(function(){
    $('.sticky-area h2').parents('*').css(
        {'overflow' : 'visible', 'overflow-x' : 'visible', 'overflow-y' : 'visible'}
    );
});
</script>

先祖要素も含めた親要素の置き換えが必要になるため、「parents」メソッドを使用することになります。

jQueryで親要素を取得するclosest,parent,parentsの使い方【サンプル有】
jQueryにて、親要素を操作するメソッドparent、parents、closestの仕様についてまとめました。それぞれの関数を上手く使い分けると効率的な処理が出来ます。

このjQueryの記述は、サイトによっては与える影響が大きい修正となるので、デザイン崩れなどを起こしたら使用は控えたほうがいいかもしれません。

テーブルの見出しを追従させる方法

tableタグの見出しを追従させることで、セル毎にどの項目かを直ぐ判断できるので便利になります。

あまりに長い行数を持つテーブルでは、position:stickyによる実装を検討してみても良さそうです。

ただし、固定するタグはtheadでは効かないので、thを指定するようにしてください。

.table-sticky th{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

下記のテーブルはth要素を固定させた実装例です。

当サイトのアクセスの多いページ上位20件を載せたテーブルで、見出しとなるthがposition:stickyによって固定されていることが分かります。

順位 記事 アクセス
1 モテないしわたモテ即売会に参加する【モテ即4オフレポート】 2997
2 「WHERE 1=1」は条件付きSQL文が書きやすくなる魔法の言葉 427
3 【PHP】簡単に4択クイズプログラムを作ってみよう 282
4 jQueryでチェックボックスの取得・判定・イベントまとめ【サンプル有】 244
5 jQueryでセレクトボックスの取得・代入・追加・削除・イベントまとめ【サンプル有】 225
6 「わたモテ」が生活の一部になりつつある男の話 219
7 スマブラSP英語用語集【キャラ、ステージ、アイテム】 177
8 iOSブラウザのセレクトボックスUIが使い辛すぎ問題 174
9 jQueryでクイズプログラムを作成【サンプル有】 130
10 ランダム抽選ツール 120
11 jQueryでラジオボタンの取得・判定・イベントまとめ【サンプル有】 93
12 jQueryのイベント一覧まとめ【サンプルコード有】 89
13 HTMLフォームの数値入力で増減(スピナー)ボタンを実装 74
14 わたモテクイズゲーム 73
15 jQueryでAjax通信を行う方法【サンプルコードで解説】 72
16 jQueryで要素の表示・非表示を切り替える方法【サンプル有】 72
17 jQueryでテキストボックス要素の取得・代入・イベントまとめ【サンプル有】 70
18 PHPで改行・空白行の削除を行う処理 68
19 CSSでスクロールスナップ(scroll-snap)の実装方法【デモ有】 66
20 最強の都道府県選択のUIを考えてみた【HTML+CSS+jQuery】 64

お手軽に追従機能を実装できるposition: stickyは、紹介した例以外でも、スマホのグローバルメニューなど、用途は多岐にわたります。

仕様を理解した上で、使いたい場面では活用していきましょう。

以上、CSSのposition:stickyの使い方と効かないケースを解説、でした。

コメント

タイトルとURLをコピーしました