SOTA-JP.COM

書評、WordPress、アフィリエイト、米国株投資

position:stickyが効かないときはフレックスボックス(display:flex)を試して欲しい。

投稿日:

追尾広告

サイドバーにスクロール追尾型の広告を配置する時は、CSSのposition:stickyが便利です。

これを使うと、Javascriptなしでスクロール追尾型コンテンツを配置できます。

そんな便利なstickyですが、場合によってはうまく効かない場合があるんです。

実際、僕も当サイトをカスタマイズしているときにハマりました。

そこで、この記事ではposition:stickyが効かない場合の対応策をシェアします。

ポイントは、フレックスボックス(display:flex)です。

position:stickyの基本形

まずは、スクロール追尾型コンテンツを配置するときの基本形から。

#content

#main
#side

#ad

この場合、#adをスクロール追尾させるには、次のCSSを書きます。

#ad {
  position: -webkit-sticky; /* Safari */
  position: sticky;
}

適切に表示されない原因

でも、基本形だけでは適切に表示されない場合があります。
スクロールしてもちゃんと追尾しないんです。

いろいろと調べてみると、#mainと#sideの高さが揃っていない場合にうまく行かないことが分かりました。

つまり、こういうケースです。

#content

#main
#side

#ad

高さが揃わない原因は色々と考えられますが、最も多いのは、floatで#mainと#sideを横並びにしているケースです。

この場合は#sideのheightを100%にしても、#mainのheightと同じにはなりません。
floatを使うと、高さが失われてしまうようです。

floatを使いつつ高さも維持する方法を調べたみたんですが、CSSだけで実現させる方法は結局分かりませんでした。

解決策

じゃあ、どうするか。

解決策は、フレックスボックス(diplay:flex)を使うことです。

フレックスボックスを使うことで、横並びさせつつ、高さも揃えることができます。

具体的には、横並びさせたい要素の親要素、今回で言えば#contentにdiplay:flexを指定します。

#content {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
}

古いブラウザにも対応させるために色々書いてます。
最新のブラウザのことだけを考えるなら、diplay:flex;だけでもOKです。

最後に

diplay:flexはCSS3で追加された仕様なので、IE8には対応していません。

個人的にはIE8対応はもう切り捨てているので全然構わないんですが、そうも言えない状況もあるかもしれないので、一応注意してくださいね。