CSS position: stickyが効かない原因(IEでも効かせる方法)

こんにちは。テイクです。ホームページを作り続けて9年になります。

CSS position: stickyは指定した要素がスクロールしても画面上に追従するCSSです。

しかし、特定の条件により効かないことがあります。
私自身はまったことがあります（汗

CSS position: stickyが効かない原因と解決方法を説明します。

ちなみにこのページでは見出しに「position: sticky」を指定しています。スクロールしても画面上に追従されているハズです。

原因1.topが指定されていない

「position: sticky」を指定した要素に「top:0」を指定しましょう。もちろん値は必要に応じて変えてください。

原因2.親要素の高さと一致している

「position: sticky」のスクロール範囲は親を基準とします。

そして親の高さの範囲内でスクロールします。親の高さと自分の高さが一致・同じだとスクロール隙間がありません。

つまり親に自分以上の高さが必要なのです。

解決方法1：親の高さを確保する

1-1.heightを指定する

親の高さをheightを使って指定しましょう。とは言え、heightの指定は一般的ではなく実用的ではありません。「position: sticky」の仕様を確認するとき程度しか使えないでしょう。

1-2.flexを使用

floatを使ってしまうと高さの確保が難しくなります。

そこでdisplay:flexを使います。

display:flexを使うと横並べの要素の高いほうに高さがそろいます。

サイドメニューを追随させたいときはこの方法が便利です。

1-3.追従させる要素とコンテンツを兄弟要素にする

コンテンツがあることでその分高さを確保することができます。

解決方法2：高さのある要素を親にする

2-1.親要素に「position: sticky」を指定する

親要素の親要素に高さがあり、かつ、デザイン上問題がなければ親要素に「position: sticky」を指定しましょう。

2-2.親要素を取り除く

親要素が不要なdivなどならその要素を取り除いてしまいましょう。

原因3.親要素にoverflowを指定している

overflow:scrollの場合

親要素にoverflow:scrollを指定した場合、その親要素内をスクロールしたときに親要素内で追従するようになります。

これはこれで便利な機能です。

追従する基準が変わるので、overflowを指定したときはちょっと注意です。

overflow:hiddenの場合

position: stickyの先祖要素にoverflow:hiddenがかかっているとposition: stickyは効きません。

「position: sticky」と「overflow:hidden」の両立は不可能なので「overflow:hidden」を使わない方法を考えましょう。

原因4.IEには対応していない

非常に便利な「position: sticky」ですが、IEには対応していません。

でも大丈夫。「fixedsticky.js」というjQueryがあります。

fixedsticky.js使い方

1. fixedsticky.jsをダウンロード

GitHubからfixedsticky.jsをダウンロードします。
任意のフォルダに置きましょう。

2.htmlファイルに以下を記述

<script src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="fixedsticky.js"></script>
<script>
$(function(){
    $(".sticky").fixedsticky();
});
</script>

1行目はjQueryファイルです。

2行目が先ほどダウンロードしたfixedsticky.jsです。階層を間違えずリンクさせましょう。

3行目～は「position: sticky」をあてたいクラスを指定します。

3.追従させたい要素にクラスを指定する

<div class="sticky">追従するよ</div>

4.CSSに以下を記述

<style>
.sticky{
    top: 0;
    position: sticky;
}
.fixedsticky-withoutfixedfixed .fixedsticky-on, .fixed-supported .fixedsticky-on{
    position: fixed;
}
</style>

実はこのjQuery、要素が画面を通り過ぎるタイミングでクラスを切り替えているだけなのです。よって、そのCSSにIEでも使えるCSSである「position: fixed;」を指定します。ついでに「top: 0;」も指定します。

もひとつ言うとIEのときだけクラスをつけるのでchromeなどではクラスがつかず、同時に「position: fixed;」も指定されないという寸法です。

さらにもひとつ言うと「position: fixed;」をあてているので、親ではなくbodyが基準になります。特定の要素内でだけ追従させたいときはiframeなどで別ファイルを使用するしかありません。

まとめ

1.topが指定されていない

「top:0」を指定しましょう。

2.親要素の高さと一致している

親の高さを確保しましょう

3.親要素にoverflowを指定している

overflow:scrollの場合追従する基準が変わります。

overflow:hiddenの場合効きません。

4.IEには対応していない

jQueryで対応させましょう。

　

以上、CSS position: stickyが効かない原因と解決方法でした。