スタイルシートだけで サイド部分をスクロール固定する。

2024年7月9日

ホームページは、2列構成になるケースがあります。
メインカラムと、サイドカラムです。

たいていメインカラムのほうが縦に長く、サイドカラムは上へ流れて行ってしまいます。
その場合、サイドカラムはほとんど見てもらえなくなります。

これを何とかするために、サイドカラムを位置固定する方法があります。
特定位置になったら固定し、フッターが来たら固定を解除するものです。

今まではJqueryで実装していましたが、スタイルシートだけで実現できることがわかりました。
忘備録として記録いたします。

まずはできたものがこちら

サンプルはこちらです。

右サイド部分がスタイルシートだけで固定できています。
いったいどうやっているのでしょうか?

position:sticky; を使えば簡単に実現できます。

position:は、fixed、absoluteなどを指定します。
その仲間で、stickyがあります。

意味合い的には、「特定位置になったら固定」というものです。
なんとも便利なスタイルシートです。

基本構成

基本的な構成は次のようになります。
いわゆるよくあるパターンです。

基本スタイルシートはこのようになります。

基本これだけでサイドカラムがスクロール固定されます。

全体枠（article）は必ずflexにする

2カラム構成にする場合、「float」を使う方法がありますが、今回はNGです。
なぜならば、ちゃんと動作しなくなるためです。
サイドカラムを包括するタグには必ずflexで2カラム構成にします。

justify-content: space-between;の意味

これは、flexに対して、横位置を均等割り当てをするという意味です。
今回は、メインカラムは一番左よせ、サイドカラムは一番右よせにしたいので、「均等割り当て」で配置しています。

こちらの解説をみると、わかりやすいです。

align-items: flex-start;の意味

これは、flexに対して縦位置を上に割り当てるという意味です。
今回は、サイドカラムが画面の一番上に来たら固定するため、上位置を指定しています。

こちらの解説をみると、わかりやすいです。

サイド部分（#side）はstickyとtopを指定する

実際に固定化する部分に「sticky」を設定します。
さらに、topを数字で指定します。
topを指定しないとうまく動きません。

ちなみに、必ず0にする必要はなく、固定化する位置によって変えてOKです。

ソースはこちら

これってサイド部が上固定だけど、下固定にはできないのか？

サンプルは、サイド部分が上固定になっています。
ですが、下固定にしたいケースもあります。
それって実現できないのか、調べてみました。

調べてみたら、スタイルシートのオプションを変えるだけで実現できることがわかりました。

サイド部分下固定のサンプル

実際に下固定にできたものがこちらです。

右サイド部分が下固定で動きます。

下固定にする方法

下固定にするには、2カ所変更すれば実現できます。

（１）article のalign-items: flex-start;をalign-items: flex-end;にする

包括部分（article）をalign-items: flex-end;にすれば「下位置合わせ」になります。
flex-startが基準位置上に対し、flex-endは基準位置下になります。

（２）#sideのtop を削除し、bottomを追加する。

stickyを指定しているサイド部分には、スタイルシートでtopを指定します。
これを削除し、代わりにbottomを指定します。
下基準にするので、bottomです。

この2カ所変えるだけで下固定に代わります。

下固定のソースはこちら

次のような場合はちゃんと動かないので注意です。

stickyは便利ですが、文法にうるさいです。
次の場合は動作しないので注意が必要です。

• 親要素に「overflow:hidden;」を指定している
• align-items: stretch;(デフォルト)になっている

動かない理由はほかにもありますが、大きくはこの2つです。
position指定は、もともと癖が強いので、使い場合には文法をよく確認する必要があります。

まずカラム分けは、float指定からflex指定に変えることこちからが大事なんだと気づきました。