横scroll付きのoverflow:hidden要素内で要素の固定を実装 – css:sticky

条件が限定されているが、要素内での要素固定を求められたケースがあり、fixedで実現ができなかったので半ば諦めムードの中、検索しまくって片っ端から試していたら実現できたのでメモ。

横スクロールでoverflow:hiddenのボックスがあり、スクロールするとそのタイトルが一緒にスクロールされてタイトルが見えなくなってしまう、という状態。
横スクロールのボックス外にタイトルを設置すれば全然問題のだが、ボックス内のコンテンツ自体が他業者動的コンテンツを使っており、そのコンテンツ自体がない場合がある。
そのため、タイトルも含めそのコンテンツ出力側にタグごと出してもらうようにしたのだが、やはりそれが仇になった。

ボックスの外に出す場合は業者に連絡をしてタグなしのものに変更してもらう必要があり、当然カスタマイズ費がかかるし、コンテンツの有無を取るためにJS等を使わないといけなくなるので、ボックスの外に出すことは早々に却下。

なんとかCSSで実現しないと、と思い、最初に試したのがposition:fixed。

position:fixedは基本的にはブラウザウィンドウに対しての位置固定のため、普通にcssに追加したらウィンドウの左上隅に出てしまう。

なので、absoluteを設置する時と同じように親要素にposition:relativeを付け、試すもやはりだめ。

どうやらposition:fixedではボックス内での位置固定は実現できない様子。

何か別の方法はないのか、と検索をしていたところ、position:stickyというものに辿り着いた。

これとtop、leftなど基準の場所を指定すれば要素内での位置固定ができるという。

PCのブラウザ（firefox）の開発ツールを使ってcssを追加したところ、希望の動きになった。

ということで、本番用のcssに追記して動かしたところ、問題なく希望通りの動きとなった。

ちなみに、safariで使用する際はベンダープレフィックス（position:-webkit-sticky）が必要なので要注意。

一件落着。