position: sticky;の使い方や効かない場合の対処法について【CSS】

以前までは、IEなどの非対応ブラウザがあったりして使用する機会が多くはなかったposition: sticky;ですが、今はIEもサポート外で、モダンブラウザはすべて対応していますので使用する機会が多くなりました。

position: fixed;と似たような動きをしますが、仕様を理解するとposition: sticky;の方が使いやすかったりしますので、ぜひしっかりと覚えてみてください。

position: sticky;とは

position: sticky;とはpositionプロパティの値の1つで、親要素を基準に、スクロール時に指定した位置まで要素がきた場合、その位置で固定できるものになります。

position: fixed;との違いについて

position: fixed;との違いはいくつかりますので、下記をご覧ください。

fixed

• 親要素に関係なく、画面(ウィンドウ内)を基準に絶対位置に固定できる
• 高さが保たれない

sticky

• 親要素を基準に、指定した位置に相対位置で固定できる
• 高さが保たれる

上記のように、fixedはスクロールに関係無く最初から画面(ウィンドウ内)を基準に位置固定となりますが、stickyは親要素を基準に、指定位置までスクロール時にその位置に固定となります。
また、stickyは高さが保たれるので、固定時に位置がずれるなどもありません。

position: sticky;の使い方

position: sticky;の使い方は、スクロール時に指定位置に表示された際に固定したい要素に以下のCSSを追加します。

.sticky {
    position: stycky;
    top: 0;
}

stickyは固定する位置(topまたはbottom)を指定する必要があります。
次に実際に固定した例を解説していきます。

ヘッダーの固定

下記例では、スクロール時にヘッダーを親要素(.wrap)を基準に、top: 0;に固定しています。

<div class="wrap">
    <header>ヘッダー</header>
    <div class="content">コンテンツ<br>コンテンツ<br>コンテンツ<br>コンテンツ<br>コンテンツ<br>コンテンツ<br>コンテンツ<br>コンテンツ<br>コンテンツ</div>
    <footer>フッター</footer>
</div>

.wrap {
    margin: 40px 0;
}
header {
    padding: 15px;
    background-color: #F2F2F2;
    position: sticky;
    top: 0;
}
.content {
    padding: 20px 15px;
}
footer {
    padding: 15px;
    background-color: #F2F2F2;
}

これまではfixedで固定する事が多かったとは共いますが、fixedでは高さが保たれないので、固定したヘッダーに埋もれてしまい、その分の余白を指定する必要がありましたが、stickyでは高さが保たれる為その必要はありません。

フッターの固定

下記例では、スクロール時にフッターを親要素(.wrap)を基準にした位置bottom: 0;に固定しています。

.wrap {
    margin: 40px 0;
}
header {
    padding: 15px;
    background-color: #F2F2F2;
}
.content {
    padding: 20px 15px;
}
footer {
    padding: 15px;
    background-color: #F2F2F2;
    position: sticky;
    bottom: 0;
}

フッターがbottom: 0;の位置までスクロールされた後は、固定から通常の表示になります。

stickyが効かない場合

position: sticky;が効かない場合は、以下の内容を確認してみてください。

親要素・先祖要素にoverflow: hidden;が指定されている場合

親要素や先祖要素にoverflow: hidden;が指定されている場合はposition: sticky;が効きません。
また、overflowプロパティのvisible以外の値(auto・scroll・hidden)が指定されている場合も効かない場合もあるようです。

topまたはbottomが指定されていない場合

固定する位置を指定していない場合も効きませんので確認してみてください。

親要素に高さが無い場合

親要素に高さが無いと、基準とする位置が取得できない為stickyは効きません。

さいごに

いかがでしたでしょうか。
今回は、position: sticky;の使い方や効かない場合の対処法について解説しました。
position: fixed;よりも簡単に使用できるので使えるようになると重宝するプロパティです。ぜひしっかりと覚えて使ってみてください。