CSSのpositionのstickyでコンテンツをサイトの一定の範囲内にフローティングする

結城永人 -2018年9月24日 (月)

ブログの記事／追加ページの本文の右下にフローティングの戻るボタンを付けた。当初、方法は分かったけれども画面のスクロールからアドセンスのサイト広告に重なるとポリシー違反の恐れがあるので、用心してやらなかったんだ。ところが記事／追加ページの本文のところだけとかアドセンスのサイト広告を避けられるブログの一定の範囲内に表示すれば大丈夫だと気付いてCSSのpositionのstickyを使って試したら上手く行った。stickyは画面のスクロールに応じてコンテンツを固定できる水に浮かんだパイナップル

Pineapple floating in water by Pineapple Supply Co. / CC0

CSSのpositionで同じような値にfixedがある。どんな場合でも画面にコンテンツを固定する。使うと、常時、フローティングで表示されるデザインになる。stickyはfixedとは少し違って最初からサイトの一定の範囲内でしかコンテンツを画面に固定しないpositionの値なんだ。サイトのどこからどこまでstickyのコンテンツが表示されるかはHTMLの親要素によって定められる。なので親要素の配置の仕方によってはサイト全体から捉えてもコンテンツのフローティングを行うかどうかを変えられもするわけだ。

divなどの親要素の開始タグの位置

↓

▼stickyで上から五文字分に固定するコンテンツ

│

画面のスクロールで移動する通常のコンテンツ

│

▲stickyで下から五文字分に固定するコンテンツ

↑

divなどの親要素の終了タグの位置

サイトの親要素の部分がスクロールで画面から外れるとstickyのコンテンツも普通に表示されなくなる。面白いのが画面のスクロールの進行方向にpositionのstickyを指定すると親要素の範囲内に当該のコンテンツがまだ到達してなくてもフローティングが行われるんだ。フローティングの戻るボタンに役立つけど、例えばサイトの下の方に設置していても親要素の下側にstickyを指定すると親要素の開始と同時に戻るボタンがフローティングで表示される。翻ってスクロールの反対方向の親要素の上側にstickyを指定すると下の方のコンテンツはスクロールで到達するまで表示されないし、フローティングはかからない。

粘着位置指定は、相対位置指定と固定位置指定を組み合わせたものです。粘着位置指定された要素は、指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱われます。

position - CSS｜MDN

ちょっと分かり難いけど、すなわちstickyの位置取りの「しきい値」としてのCSSの判定がサイトのスクロールの向きに影響を受ける。通常の場合は縦で、上から入って下へ閲覧するのが普通とすると下側の「しきい値」は親要素が表示されると直ぐに越えて「固定位置指定」（フローティングされた状態）に切り替わる。上側は親要素だけではなくて当該のコンテンツが表示されてからでなくては「相対位置指定」（positionのabsoluteで変更しなければサイトに記載した順番）のまま、求められる「しきい値」の判定は行われずに止まっている。例外的にスクロールの進行方向にstickyの位置取りを合わせるデザインにかぎって画面に表示されない場所のコンテンツをフローティングで親要素の範囲内に先取りして表示できるようになるわけだけれども「相対位置指定」が「しきい値」を越えたかどうかのCSSの判定が行われ易いせいなんだ。通常の場合でもサイトの下の方から入って上へ閲覧すると事情は逆になるし、親要素の上側に指定したstickyのコンテンツこそ直ぐにフローティングが行われる。左右に閲覧するサイトでもスクロールの進行方向にstickyの位置取りを合わせるならばまだ到達しないコンテンツをフローティングで先取りして表示できるようになる。CSSのpositionのstickyのマークアップposition:sticky;位置取り:値;※位置取りの値には8pxや1emなどの長さを入力する。サイトでpositionのstickyを使うにはその他に固定する位置取りと値を、一つ以上、指定しなくてはならない。

top：範囲内の上からの位置

bottom：範囲内の下からの位置

left：範囲内の左からの位置

right：範囲内の右からの位置

stickyで固定するコンテンツの位置取りの属性はtopとbottomとrightとleftの四つに分かれている。それぞれに親要素の開始タグと終了タグで囲まれた上下左右の各側を基準としている。併せて長さの値を記載するとstickyで固定するコンテンツの位置が親要素に対して決まる。fixedなどの他のpositionの属性とは位置取りの値の意味が違うから注意しなくてはならない。stickyの場合は値が位置取りに影響しない。デザイン上はフローティングの時点のコンテンツに余白を付ける程度の意味しかなさそうで、それ自体は「相対位置指定」と「固定位置指定」を切り替える「しきい値」を示しているだけなのかも知れない。指定しても位置取りそのものは変わらないし、例えば「right」を使えばサイトの右側から表示できるわけではないので、位置取りそのものを変えるためには他のデザインを付け加えなくてはならない。ただしstickyのコンテンツに指定しても反映しないので、領域タグのdivなどで囲ってtext-alignなどから全体的に指定する必要がある。stickyのコンテンツの位置取りをtext-alignで変える方法HTML<div class="sticky-content"> <p>フローティングのコンテンツ</p> </div>CSS.sticky-content {text-align:値;position:sticky;位置取り:値;}※位置取りの値には8pxや1emなどの長さを入力する。CSSのtext-alignの値

left：左寄せ

center：中寄せ

right：右寄せ

フローティングのコンテンツはtext-alignの全体的な位置取りとは別にpositionのstickyを指定しても反映する。同行内でフローティングのコンテンツを分ける場合HTML<div class="sticky-content"> <p>通常のコンテンツ<span>フローティングのコンテンツ</span></p> </div>CSS.sticky-content {text-align:値;} .sticky-code span {position:sticky;位置取り:値;}※位置取りの値には8pxや1emなどの長さを入力する。他のコンテンツと並んでいて一つだけフローティングさせたい場合には区画タグのspanなどでさらに細かく囲ってpositionのstickyを指定すると全体的な位置取りを保ちながらスクロールに応じて抜け出すようなデザインも付けられる。複数のstickyのコンテンツの重なり方を変更する共通する親要素に複数のstickyのコンテンツを配置する場合は順番毎に上に重なる。変更するにはCSSのz-indexを使って高くしたい方を低くしたい方よりも大きな数値で指定する。CSS.sticky-content-1 {position:sticky:top:1em;z-index:2;} .sticky-content-2 {position:sticky:top:1em;z-index:1;}z-indexの値が大きいとstickyのコンテンツのフローティングの高さが上がる。

コメント