
CSS position: stickyの使い方。効かない!ときはここをチェック。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
position: stickyの使い方。
サイドバーをスクロールの途中で固定させたい場合、以前はJavaScriptなどを組み合わせなければ実装できなかった。それが「position: sticky」の登場により、CSSだけで可能になった。
ブラウザ対応もすでに追いついており、使い方を覚えると、とても便利なプロパティとなる。
position: stickyが効かないとき。(2カラムの場合。)
位置や高さの指定など、CSSの仕様を踏まえておく。
注意点として、stickyはそれ単体では効かない。
例えばサイドバーに「position: sticky;」だけを指定しても、何も変わらない。
CSSの仕様上、2カラムレイアウトで「position: sticky;」を使用する時は、、、
- 「position: sticky;」と一緒に、位置を決める「top、 right、 bottom、 left」のいずれかが指定されているか?
- 「position: sticky;」と一緒に、高さ「height」が指定されているか?
- 「position: sticky;」を指定した要素の親要素、先祖要素の「overflow」が初期値の「visible」となっているか? (※逆に、hidden、 scroll、 auto、 overlay」のいずれかが指定されていないか?)
が、必要となる。
最低限、このセットで「sticky」は機能する。
もしうまく効かないときは、この3つをチェックすると良い。
position: stickyの実装例。(2カラムの場合。)
mainタグとasideタグで2カラムにする場合。
例えば一般的なブログのような2カラムにする場合は、以下の通りで実装できる。そしてサイドバーになるasideを「sticky」にする。
(※このページでもstickyを実装しているので、スクロールすると挙動が確認できます。)
HTML
例)
<div>
<main>メインコンテンツなど</main>
<aside>サイドバーなど</aside>
</div>
CSS
例)
div {
display: flex;
overflow: visible; /* 初期値なので省略可。hiddenなどが指定されていないように注意。 */
}
main {
width: 70%;
}
aside {
position: sticky;
top: 50px;
width: 30%;
height: 100%;
}
今回の例では、mainとasideをdivで囲み、「display: flex」を指定している。これで子要素のmainとasideがFlexアイテムとなり、自動的に2カラムになる。
上記の繰り返しとなるが、チェックする項目としては、、、
asideに、「top」などの「位置」のしきい値が指定されているかをチェック。
- 「position: sticky」を指定した要素に、位置を決める「top、 right、 bottom、 left」のいずれかを併用する必要があるため。
asideに、「高さ」が確保されているかをチェック。
- 「position: sticky」を指定した要素に、高さがなければ機能しないため。
mainとasideの親要素の「overflow」プロパティが初期値の「visible」かをチェック。
- 「overflow」の初期値は設定しなければデフォルトの「visible」となる。もし「hidden、scroll、auto、overlay」の値が指定されていると、CSSの仕様上、「position: sticky」は機能しない。
MDN: position – CSS: カスケーディングスタイルシート | MDN
※2023.01.21追記)
ChatGPTに聞いてみた場合。
「CSSのposition: stickyの使い方を教えてください。」
英語で返答が来たので、Google翻訳で日本語に。
現実的にはこれでは実装できない。というよりもこれでは効かないため、失敗してしまうことが多いのだ。
動作させるにはコードが足りない。なので次の質問をしてみた。
「CSSのposition: stickyが効きません。どうすれば良いですか?」
また英語で返答が来たので、Google翻訳で日本語に。
おおむね正しい感じだが、文章が長く、ちょっと読みにくい。
z-indexに触れているが、z-indexは必須ではない。
また、ブラウザのサポートについての言及があるが、現在のモダンブラウザでは問題なく使用できる。
参照:“position: sticky” | Can I use… Support tables for HTML5, CSS3, etc
position: stickyが効かないとき。(1カラムの場合。)
1カラムの場合、「position: sticky;」を使用する時は、、、
- 「position: sticky;」と一緒に、位置を決める「top、 right、 bottom、 left」のいずれかが指定されているか?
- 「position: sticky;」を指定した要素の親要素に、高さ「height」と「overflow: scroll;」が指定されているか?
が、必要となる。
レイアウトが1カラムか2カラムかで変わるのでちょっとややこしいが、気をつけるポイントとなる。
position: stickyの実装例。(1カラムの場合。)
※2023.03.30追記)
Figmaのアップデートで、プロトタイプに「Sticky」が追加された。
1カラムのスマホの構成、スクロールすると上部、ヘッダーに見出しがくっつくデザインが掲載されている。
引用:Figma最新情報
このような、ヘッダーにStickyを使うデザインの場合、以下のようなコードで実装できる。
- 見出し用のh2に、「position: sticky;」と、「top」を指定。
- 親要素のsectionに、「height」と「overflow: scroll;」を指定。
HTML
例)
<section id="box_sticky">
<h2>見出し1</h2>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<h2>見出し2</h2>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<h2>見出し3</h2>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<h2>見出し4</h2>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<h2>見出し5</h2>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<h2>見出し6</h2>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<h2>見出し7</h2>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<h2>見出し8</h2>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<h2>見出し9</h2>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<h2>見出し10</h2>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</section>
CSS
例)
#box_sticky {
width: 60%;
height: 500px;
overflow: scroll;
margin: auto;
color: #fff;
}
#box_sticky h2 {
position: sticky;
top: 0;
background: #f15d00;
padding: 10px;
font-size: 20px;
font-weight: bold;
}
#box_sticky li {
margin: 10px;
font-size: 15px;
}
上記のコードの実装例。
見出し1
- リスト
- リスト
- リスト
見出し2
- リスト
- リスト
- リスト
見出し3
- リスト
- リスト
- リスト
見出し4
- リスト
- リスト
- リスト
見出し5
- リスト
- リスト
- リスト
見出し6
- リスト
- リスト
- リスト
見出し7
- リスト
- リスト
- リスト
見出し8
- リスト
- リスト
- リスト
見出し9
- リスト
- リスト
- リスト
見出し10
- リスト
- リスト
- リスト
これでヘッダーに見出しがStickされる。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。