position:sticky
2024年7月5日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は「position:sticky」についてです。※ジッパーの人とは関係ありません。
positionについておさらい
参考：MDN｜position
参考：サルワカ｜CSSのpositionを総まとめ！absoluteやfixedの使い方は？
CSSのプロパティのpositionには、
・static
・relative
・absolute
・fixed
・sticky
があり、staticが規定値のようです。
・staticは位置や重ね順を変更できない
・relativeは通常位置を基準にした相対位置
・absoluteは親要素を基準にした絶対位置
・fixedは画面内の決まった位置に固定
だそうです。
「親要素にrelative、子要素にabsolute」は画像に文字を重ねる時に出てきました。
fixedはハンバーガーメニューとかトップへ戻る矢印で使いました。
ではstickyとは・・・？
Chemist and Pharmacist
position:sticky
参考：ZeroPlus Media｜【CSS】position:sticky;の使い方と効かない場合の対処法を解説
stickyとは「粘着性のある」「ネバネバ」という意味だそうです。転じて「厄介な」「気難しい」「ユーザーを惹きつける」「蒸し暑い」という意味もあるそうです。
ちなみに「Sticky Fingers」は「ネコババする」とか「手癖が悪い」という慣用句だそうです。
position:stickyは「スクロールに従って移動し、親要素の特定の位置に来たら固定される」というものだそうです。
relativeとabsoluteとfixedを足したような感じですね。
早速実装してみましょう。position:stickyを適用させる要素にsticky-item、親要素にsticky-containerというクラス名をつけておきます。
<div class="sticky-container">
ぶんしょう
<h2 class="sticky-item">Chemist</h2>
ぶんしょう
<h2 class="sticky-item">and</h2>
ぶんしょう
<h2 class="sticky-item">Pharmacist</h2>
ぶんしょう
</div>.sticky-container {
height: auto;
width: 100%;
}
.sticky-item {
position: -webkit-sticky;
position: sticky;
top: 0;
}Safari用にベンダープレフィックスを併記しておいた方がいいみたいです。
このページをスクロールして挙動を確認してみてください。
2番目、3番目はどんどん上に重なっていって、親要素が画面から消えるとstickyも消えていきます。
ちなみにBootstrapに最初からクラスが用意されていました。
.position-sticky {
position: -webkit-sticky;
position: sticky;
}
@supports ((position: -webkit-sticky) or (position: sticky)) {
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}
}この@supportsっていうのは何なんだろう※機能クエリといって、ブラウザが対応しているかどうかをチェックする機能らしいのですが、まだよく理解できていません
Chemist and Pharmacist
position:stickyが効かないとき
最初、適当にやっても全然固定されてくれませんでした。
・topを指定していない
・親要素の高さがない
・親要素にoverflow:hiddenを指定している
・そもそもブラウザが対応していない
などの場合は動かないようです。
参考元のサイトでとてもわかりやすく解説してくれています。
Chemist and Pharmacist
まとめ
最初はページの下部にナビゲーションメニューがあって、スクロールすると上端で固定されてヘッダーになる、というレイアウトで使ってみたいですね。
ブログの見出しとか、表（テーブル）のヘッダーとか、サイドメニューを固定させたい時にも使えそうです。
