プロパティpositionについて

まずはCSSのプロパティpositionについて簡単に理解しておくと、stickyをより理解しやすくなるでしょう。

CSSのpositionプロパティは、要素の位置の設定方法を指定するために使用されます。positionプロパティには4つの値があります。

1. static
   デフォルト値であり、要素を通常の流れに沿って表示します。
2. relative
   要素を通常の流れに沿って表示し、top、right、bottom、leftプロパティを使用して位置を微調整できます。
3. absolute
   親要素を基準に、指定した位置に要素を配置します。
4. fixed
   ブラウザウィンドウを基準に、指定した位置に要素を配置します。要素はスクロールしても位置が変わりません。
5. sticky
   親要素内での直下の子要素を指定した高さに到達するまでウィンドウ内に固定したい場合。

これらの値を使用して、要素の配置方法を制御することができます。positionプロパティは、Webページのレイアウトの調整に重要な役割を果たしています。

stickyはpositonプロパティの属性値の一つ

どうしてstickyが必要になったのか

CSS記述業務をしているかたであれば、positonプロパティは割と多く使用する頻度があるかと存じますが、relativeやabsolute、fixedなどはわりと使用するケースが多いかもしれません。

今回この記事のテーマとなったstickyを使用する理由については、メディアサイトのＨＴＭＬマークアップで特定のコンテンツに追従するバナーブロックが必要になったからです。

追従バナーは通常はブラウザウィンドウの左右どちらかまたはフッタの固定位置にfixedで固定されるケースがほとんどです。
しかし、ウィンドウの高さが長い場合、追従バナーが下まで表示されず、コンテンツと離れてしまうという問題が発生します。そこで、追従バナーに対してstickyプロパティを適用することで、コンテンツに追従しつつも一定の範囲内で固定表示することができるようになりました。

stickyプロパティは、指定された位置に到達すると要素を固定し、次の要素に重ならないようにするプロパティです。これにより、コンテンツの一部として追従バナーを表示することができます。
そのため、追従バナーのようにコンテンツと一緒に表示する必要がある要素には、stickyプロパティが必要になってくるのです。

特定のコンテンツ内だけを追従させたい場合のsticky

動作しない理由と動作させるために

冒頭の章でも簡単に説明させていただきましたが、参考にしたページには3行で動くと記載されていて、プロパティを追加するだけだと考えて反映したのですが、まったくＣＳＳが効かないし追従しない状況でした。

調べてみると、親要素に明確な高さ指定をしておく必要があり、その高さのスクロール移動にあわせてウィンドウの上部で固定して追従させるようなプロパティ属性値でした。

ですので、親要素でflexプロパティを使用していた場合や、高さが〇〇pxのように指定されていない場合はstickyは効きません。

• 親要素にheight:0000pxなど具体的な数値でスクロールした際の高さを指定する必要がある

参考ページには、メディアタイプのページに配置するだけで追従するようなイメージで記載されていましたが、あくまでも2カラムであれば、どちらか長い方のカラムの高さをpxなど具体的な数値で明記する必要がありました。

• 動的にページの高さが変化するサイトの場合はJavaScriptで高さを取得してcssを動的に書き換える

さらにJavaScriptなしでいけるという解説があったのですが、調べた限り動的なメディアタイプの2カラムのサイトの場合、コンテンツの長さは動的に変更されるため当社で調べた限り、動的な高さを取得して、改めて親要素のheightプロパティを指定する必要がありました。

今回の場合は以下のように高さを取得して対象の親要素に高さを差し替えるようにしました。

• var nowHeight = document.getElementById(‘高さを取得したい要素のCSSプロパティ’).clientHeight;
  $(‘.stickyの親要素cssプロパティ’).css(‘height’,nowHeight);

また今回の場合は、ウィンドウサイズを変更することで高さが動的に変動する場合もあるので、JavaScriptの$(window).resizeファンクションで高さを再取得する記述まで必要になりました。

結局のところJavaScriptが必要になる

stickyの用途や頻度の考察

最後にpositonプロパティのsticky属性に関する考察をまとめさせていただきました。

positionプロパティのstickyは、要素を追従させるためのプロパティです。スクロールしても、要素が画面の一部に残り、他の要素と重なるような場合に、このプロパティを使用することができます。

stickyプロパティの使用方法は簡単で、追従させたい要素に対して、position: sticky;を指定するだけです。しかし、実際に要素を追従させるためには、親要素に高さを指定する必要があります。このため、2カラム構成のページなど、高さが指定できない場合には、JavaScriptなどを使用して高さを取得する必要があります。

stickyプロパティは、スクロールに追従させる要素がある場合に便利なプロパティです。例えば、ナビゲーションメニューを画面の上部に表示しておき、スクロールしてもメニューが画面に残るようにしたい場合などに活用できます。また、フッターやヘッダーなどの位置を固定する際にも使用されることがあります。

ずっと定位置の場合はfixedで可能ですが、あるスクロール地点より固定させる必要のある場合は利用価値は高くなるでしょう。

ただし、stickyプロパティは比較的新しいプロパティであり、全てのブラウザでサポートされているわけではありません。また、要素の高さを取得する必要があることや、JavaScriptを使用する必要があることなど、実装に注意が必要な点もあります。

stickyプロパティは、特定の場面で非常に便利なプロパティですが、使用頻度は決して高くはありません。ただし、特定のサイトでの使用においては、優れたユーザーエクスペリエンスを提供することができるため、適切な場面で使用することが重要です。

以上がpositionプロパティのstickyについての用途や使用方法、予想される使用頻度についての考察となります。

使用頻度は高くないものの便利な属性sticky