ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】position: sticky; の使い方と効かない場合の対処法を解説

【CSS】position: sticky; の使い方と効かない場合の対処法を解説

HTML/CSS

2022/07/23

2023/06/02

posision-sticky

この記事では、positionプロパティの値の中でも比較的新しい「sticky」について解説します。

「sticky」は日本語にすると「粘着する」という意味です。position: sticky;を使用することで、スクロールしたときに、要素を指定した位置に固定させることができます。fixedとふるまいが似ているので、2つの違いも併せて覚えておきましょう。

この記事で身につく内容
  • position: sticky;の使い方
  • stickyとfixedの違い
  • position: sticky;が効かない場合の対処法

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか？

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

stickyとは

stickyは一般的に、スクロールの途中から要素を固定したい場合に使用されるプロパティです。

stickyには、日本語訳で「粘着する」という意味があります。
その名の通り、スクロールした際に要素を粘着させ、固定表示することができます。

position: sticky; は、親要素を用意して、追従する範囲を指定して使います。ここが、常に要素を画面上の特定の位置に固定するfixedと異なる点です。

stickyが適用された要素は、staticやrelativeのように高さを有して配置されます。そして、absoluteのように親要素の端に来ると、他の要素に重なるように配置される特徴があります。

stickyの特徴

  1. 初期位置は通常通りに配置される
  2. スクロールすると親要素の中で追従する
  3. 重なり順を指定できる
  4. 要素の高さを保持する

 

実際に動きを確認してみよう

ベースとなるコード

こちらのコードをベースに説明していきます。今はまだstickyを設定していない状態です。
下記のコードの動きを確認してください。（×0.5、×0.25にすると全体を見ることができます）

See the Pen sticky Base by ZeroPlus (@zeroplus-programming) on CodePen.

 

position: sticky;を加えたコード

下記がstickyを加えた動きになります。（×0.5、×0.25にすると全体を見ることができます）

See the Pen sticky by ZeroPlus (@zeroplus-programming) on CodePen.

ZeroPlus Mediaという見出しがスクロールに追従して動き、それぞれの枠の中で追従が終了しているのが確認できるはずです。

ZeroPlus Mediaという見出しが、点線で囲った枠の中だけで追従していることに注目してください。今回のコードでは、この見出し部分にposition: sticky;が適用されています。

 

position: sticky; の使い方

positionプロパティの基本書式は次のようになります。

基本書式

セレクタ {
  position: sticky;
  top: 0;
}

positionプロパティは「top」「right」「bottom」「left」の4つのプロパティと合わせて要素の配置を指定します。stickyの場合、最低限topを指定するようにしましょう。topを指定しないと、stickyがうまく動作しません。

position: sticky; を適用した要素は、スティッキーアイテムといいます。position: sticky; が適用された要素の「親要素」は、スティッキーコンテナといいます。

次の画像のようなイメージです。

スティッキーコンテナとスティッキーアイテム

要素にposition: sticky;を適用すると、自動的にその親要素がスティッキーコンテナとなります。用語として覚えておきましょう。

 

stickyは要素の高さを維持する

position: sticky; を指定した要素は、position: fixed;のようにスクロールに追従する動きをします。

下記のコードは、containerクラス要素の中にstickyが適用された要素とstickyが適用されていない要素の2つを並べたものです。それぞれの見た目の違いを比べてみましょう。

<div class="container">
  <div class="sticky"></div>
  <div class="box"></div>
</div>
<div class="contents"></div>
.container {
  width: 100%;
  height: 1000px;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

/* stickyを適用した要素 */
.sticky {
  position: sticky;
  top: 0;
  left: 150px;
  width: 100px;
  height: 100px;
  background: blue;
}

/* stickyを適用しない要素 */
.contents {
  position: relative;
  width: 100%;
  height: 500px;
  background: lightcoral;
}

.box {
  width: 100%;
  height: 80px;
  background: red;
}

出力結果

See the Pen sticky-通常配置が浮く by ZeroPlus (@zeroplus-programming) on CodePen.

スクロールすると、stickyクラス要素はposition: fixed;のように、boxクラス要素を超えてcontainerクラス要素下部までスクロールされます。

stickyとfixedは動きは似ていますが、明確な違いがあります。記事後半の「stickyとfixedの違い」セクションで解説します。

 

position: sticky; とセットで使うtop, bottom, left, right

stickyを適用した要素は、topやleftなどで要素の位置を指定できます。

例えば下記コードの場合は、親要素の上から（top）50px、左から（left）50pxの位置にstickyクラス要素が配置されます。

<div class="container">
  <div class="sticky"></div>
</div>
<div class="contents"></div>
.container {
  width: 100%;
  height: 1000px;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

.sticky {
  position: sticky;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: blue;
}

.contents {
  width: 100%;
  height: 200px;
  background: lightcoral;
  position: relative;
}

出力結果

See the Pen stickyと位置 by ZeroPlus (@zeroplus-programming) on CodePen.

要素の配置イメージは次のようになります。

position: sticky; の場合、topを指定しないとうまく動作しません。位置の指定をしない場合であっても、最低限top: 0; は適用しましょう。

 

z-indexで重なり順を変更

position: sticky; は、z-indexプロパティで重なり順を指定することができます。

z-indexは数字が大きいほど前に表示されます。

<div class="container">
  <div class="sticky"></div>
  <div class="sticky2"></div>
</div>
<div class="contents"></div>
.container {
  width: 100%;
  height: 1000px;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

.sticky {
  position: sticky;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: blue;
  z-index: 1;
}

.sticky2 {
  position: sticky;
  top: 80px;
  left: 80px;
  width: 150px;
  height: 150px;
  background: lightgreen;
  z-index: 0;
}

.contents {
  width: 100%;
  height: 200px;
  background: lightcoral;
  position: relative;
}

出力結果

See the Pen sticky-z-index by ZeroPlus (@zeroplus-programming) on CodePen.

z-index: -1; を適用した場合は、親要素の背面に要素が配置されます。

 

position: sticky; の使い所2選

positionのstickyを使う場面としては、主に次の2つがあります。

  • 2カラムでサイドバーを追従させる
  • ヘッダー・フッターを追従させる

一つずつ紹介していきます。

2カラムでサイドバー追従

2カラムのサイトでサイドバーがあるような場合、サイドバーにposition: sticky;を適用すればサイドバーを追従させることができます。フッターでサイドバーの追従が止まり、スクロールを戻せば元の位置に戻るまで追従します。

2カラムとは、メインコンテンツとサイドバーで構成されるレイアウトのことです。2カラムレイアウトは、メインコンテンツ以外の情報を掲載することができるため、サイト回遊率の向上が期待できます。

<div class="container">
  <header class="header"></header>
  <div class="content">
    <main></main>
    <aside></aside>
  </div>
  <footer class="footer"></footer>
</div>
.header {
  width: 100%;
  height: 100px;
  background: blue;
}

.content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

main {
  width: 60%;
  height: 3000px;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
  margin-right: 40px;
}

aside {
  width: 35%;
  height: 100px;
  background: red;
  position: sticky;
  left: 0;
  top: 0;
}

.footer {
  width: 100%;
  height: 200px;
  background: lightcoral;
}

出力結果

See the Pen サイドバー追従 by ZeroPlus (@zeroplus-programming) on CodePen.

 

stickyでヘッダーを追従させる

ヘッダーにposition: sticky; を適用して、スクロールに追従させることができます。スクロールを戻せば、ヘッダーは元の位置で追従が止まります。

実際にスクロールして確認してみてください。

<div class="container">
  <header class="header"></header>
  <main></main>
  <footer class="footer"></footer>
</div>
.header {
  width: 100%;
  height: 80px;
  background: blue;
  position: sticky;
  left: 0;
  top: 0;
}

main {
  wdth: 100%;
  height: 2000px;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

.footer {
  width: 100%;
  height: 200px;
  background: lightcoral;
}

出力結果

See the Pen sticky-ヘッダー追従 by ZeroPlus (@zeroplus-programming) on CodePen.

 

stickyでフッターを追従させる

フッターにposition: sticky; を適用して、スクロールに追従させることができます。スクロールを戻せば、フッターは元の位置で追従が止まります。

実際にスクロールして確認してみてください。

<div class="container">
  <header class="header"></header>
  <main></main>
  <footer class="footer"></footer>
</div>
.header {
  width: 100%;
  height: 80px;
  background: blue;
}

main {
  width: 100%;
  height: 3000px;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

.footer {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: lightcoral;
}

出力結果

See the Pen sticky-フッター追従 by ZeroPlus (@zeroplus-programming) on CodePen.

 

stickyとfixedの違い

positionの中で位置を固定するstickyとfixedですが、それぞれ若干仕様が異なります。

要素の固定位置

  • sticky：親要素内で固定
  • fixed：ウィンドウの左上（起点となる位置）を基準にした絶対位置に配置

要素の高さ

  • sticky：要素の高さは有する
  • fixed：要素の高さがなくなる（要素が浮いたような状態になる）

 

position: fixed; が適用された要素は、要素が浮いたような状態になります。その要素が浮いたような状態になる（高さがなくなる）ので、直下にある要素がその分だけ上に詰まって配置されます。

position: sticky; が適用された要素は、要素の高さは有したまま親要素の範囲内で、fixedのように追従する動きをします。こちらの場合、stickyが適用された要素の直下にある要素は、fixedの場合のように「要素が上に詰まる」ということはありません。

 

stickyは親要素を基準にするため、親要素のどこに固定するのかの位置の指定が必須となりますので注意しましょう。

値固定位置の基準要素の高さ位置の指定
sticky親要素無くならない必須
fixedウィンドウの左上無くなる必要ない

 

fixedが適用された要素は、基準位置が画面全体となるため、親要素を超えて追従する性質があります。一方でstickyが適用された要素の場合は、追従する範囲が親要素の中に限定されます。

<div class="container">
  <div class="fixed"></div>
  <div class="sticky"></div>
</div>
<div class="contents"></div>
.container {
  width: 100%;
  height: 1000px;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

.fixed {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background: red;
}

.sticky {
  position: sticky;
  top: 0;
  left: 150px;
  width: 100px;
  height: 100px;
  background: blue;
}

.contents {
  width: 100%;
  height: 200px;
  background: lightcoral;
  position: relative;
}

出力結果

See the Pen fixed-sticky by ZeroPlus (@zeroplus-programming) on CodePen.

stickyの場合、親要素のcontainerクラス要素の中でのみ追従する動きを見せています。一方でfixedは親要素のcontainerクラス要素を飛び越えて追従し、画面上の特定の位置に固定されています。

 

position: sticky; が効かないときの対処法

position: sticky; が効かない場合には、下記の理由が考えられます。

  • topを指定していない
  • position: sticky; を適用した要素の親要素に高さがない
  • position: sticky; を適用した要素の親要素にoverflow: hidden;が適用されている

 

topを指定していない

position: sticky; は、topを適用しないとうまく動作しません。left, right, bottomを指定しない場合であっても、最低でもtop: 0; は指定するようにしましょう。

 

position: sticky; を適用した要素の親要素に高さがない

position: sticky; がうまく動作しない原因で最も多いのが、親要素に高さがない、ということです。sticky要素にtop: 0; が適用されていたとしても、その親要素に高さがない場合は追従されません。

<div class="container">
  <div class="sticky"></div>
  <div class="sticky2"></div>
</div>
<div class="contents"></div>
.container {
  width: 100%;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

.sticky {
  position: sticky;
  top: 50px;
  left: 50px;
  width: 250px;
  height: 250px;
  background: blue;
}

.contents {
  width: 100%;
  height: 500px;
  background: lightcoral;
  position: relative;
}

出力結果

See the Pen sticky-親要素高さ by ZeroPlus (@zeroplus-programming) on CodePen.

この場合は、親要素に高さを指定しましょう。

 

position: sticky; を適用した要素の親要素に、overflow: hidden;が適用されている

position: sticky; を適用した要素の親要素にoverflow: hidden; が適用されていた場合は、sticky要素は追従しません。

<div class="container">
  <div class="sticky"></div>
  <div class="sticky2"></div>
</div>
<div class="contents"></div>
.container {
  width: 100%;
  height: 2000px;
  overflow: hidden;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

.sticky {
  position: sticky;
  top: 50px;
  left: 50px;
  width: 250px;
  height: 250px;
  background: blue;
}

.contents {
  width: 100%;
  height: 500px;
  background: lightcoral;
  position: relative;
}

出力結果

See the Pen sticky-overflow: hidden; by ZeroPlus (@zeroplus-programming) on CodePen.

この場合には、親要素のoverflow: hidden; を外しましょう。

 

stickyの対応ブラウザ

position: sticky; は、Internet Explorerを除くすべての主要ブラウザでサポートされています。
ただし、Safariではベンダープレフィックスを加える必要があります。

ベンダープレフィックスとは

ベンダープレフィックスとはベンダー接頭辞のことで、試験的・非標準的なCSSプロパティに対して付けられます。
Safariでのベンダープレフィックスは以下の通りです。

position: -webkit-sticky; /* Safari */
position: sticky;

 

まとめ

position: sticky; について解説しました。stickyは癖のある挙動をする値であるものの、うまく扱うことができれば、効果的な動きを取り入れることができます。

positionプロパティは、今回解説したstickyの他にも「fixed」「relative」「absolute」「static」などがあります。このようにCSSは、プロパティ一つでも覚えることがたくさんあるので、少しずつ学習を進めていきましょう。

Web制作は、その他にも学ぶべき知識が数多くあります。

Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！

アイキャッチ画像
初学者が最速でWeb制作者になるために必要なスキルと学習ロードマップ

position: sticky; まとめ

  • 初期位置は通常通りに配置される
  • スクロールすると親要素の中で追従する
  • 重なり順を指定できる
  • 要素の高さは保持する
ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか？

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

FacBook
Twitter
LINE
はてブ
PPocket

おすすめのタグ

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて
ZeroPlus Gateについて

あなたの目的に合わせた２つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

記事のアイキャッチ画像

完全無料！30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

記事のアイキャッチ画像

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから