CSS position: stickyの使い方。効かない!ときはここをチェック。デザイナー、コーチ、ディレクター / いがわ

.

Memo

position: stickyの使い方。効かないときやflexのチェック。

position: stickyの使い方。

CSSでsticky。
position: sticky;

サイドバーをスクロールの途中で固定させたい場合は、以前はJavaScriptなどを組み合わせなければ実装できなかった。

それが「position: sticky」の登場により、CSSだけで可能になった。

ブラウザ対応もすでに追いついており、使い方を覚えると、とても便利なプロパティとなる。

position: stickyの使い方。効かない時。


position: stickyの使い方の例。(2カラムの場合。)

mainタグとasideタグで2カラムにする場合。

例えば一般的なブログのような2カラムにする場合は、以下の通りで実装できる。そしてサイドバーになるasideを「sticky」にする。

このページでもstickyを実装しているので、スクロールすると挙動が確認できます。)

position: 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」は機能しない。

参考:position – CSS: カスケーディングスタイルシート | MDN


position: stickyが効かないとき。(2カラムの場合。)

位置や高さの指定など、CSSの仕様を踏まえておく。
position: stickyだけでは機能しない。

stickyは単体では効かない。

例えばサイドバーに「position: sticky;」だけを指定しても、何も変わらない。

CSSの仕様上、2カラムレイアウトで「position: sticky;」を使用する時は…

  1. 「position: sticky;」と一緒に、位置を決める「top、 right、 bottom、 left」のいずれかが指定されている。
  2. 「position: sticky;」と一緒に、高さ「height」が指定されている。
  3. 「position: sticky;」を指定した要素の親要素、先祖要素の「overflow」が初期値の「visible」となっている。hidden、 scroll、 auto、 overlay」などが指定されていないか?)

が、必要となる。

最低限、このセットで「sticky」は機能する。

もしstickyが効かないときは、この3つをチェックすると良い。


position: stickyの使い方の例。(1カラムの場合。)

1カラムでのposition: sticky

2023.03.30追記)

Figmaのアップデートで、プロトタイプに「Sticky」が追加された。

1カラムのスマホの構成、スクロールすると上部、ヘッダーに見出しがくっつくデザインが掲載されている。

引用:Figma最新情報

このような、ヘッダーにStickyを使うデザインの場合、以下のようなコードで実装できる。

  1. 見出し用のh2に、「position: sticky;」と、「top」を指定。
  2. 親要素のsectionに、「height」と「overflow: scroll;」を指定。
HTML

例)

<section id="box_sticky">
  <h2>見出し1</h2>
   <ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
   </ul>

  <h2>見出し2</h2>
   <ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
   </ul>

  <h2>見出し3</h2>
   <ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
   </ul>

  <h2>見出し4</h2>
   <ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
   </ul>

  <h2>見出し5</h2>
   <ul>
    <li>リスト</li>
    <li>リスト</li>
    <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

  • リスト
  • リスト
  • リスト
  • リスト
  • リスト

これでヘッダーに見出しがStickされる。


position: stickyが効かないとき。(1カラムの場合。)

1カラムでstickyが効かないとき。

1カラムの場合、「position: sticky;」を使用する時は…

  1. 「position: sticky;」と一緒に、位置を決める「top、 right、 bottom、 left」のいずれかが指定されている。
  2. 「position: sticky;」を指定した要素の親要素に、高さ「height」と「overflow: scroll;」が指定されている。

が、必要となる。

レイアウトが1カラムか2カラムかで変わるのでちょっとややこしいが、気をつけるポイントとなる。

ブラウザ対応について。

モダンブラウザでは問題なく使用できる。

参照:“position: sticky” | Can I use… Support tables for HTML5, CSS3, etc

CSS position: stickyの使い方。効かない!ときはここをチェック。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。