CSSだけでサイドバーの一部をスティッキーにする（固定・追従）

JavaScript を使わず、CSSだけでスクロールに追従するスティッキーな要素をサイドバーに配置する方法を自分用にメモしておきます。

サイドバー全体を固定するのではなく、サイドバーの中にある一部のブロック要素だけを「ある高さだけ」スクロールに追従させる方法です。

今回は、追従させる要素の下に別の要素が存在する前提とし、下の要素までスクロールしたら追従をやめる、という動作を実現します。

動作イメージ

今回、紹介するコードの動作イメージはこんな感じ。

右サイドバーの黄緑色要素をスティッキーにします。

下へスクロールしてもちゃんと追従してきて、

さらに、次の要素までスクロールすると、下から押し上げられる形で画面外へスクロールアウトしていきます。

指定の高さだけ追従する要素のコード

このような動きを実現するHTML・CSSは以下のとおりです。

サイドバー内に配置するHTMLはこんな感じ。

<div class="sticky-container">

<div class="sticky">
<!-- ^^^^^^^^^^^^^^ ここに追従させたい要素 ^^^^^^^^^^^^^^ -->
</div>

<div class="sticky-height">
</div>

</div>Code language: HTML, XML (xml)

CSSはこんな感じ。

.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 30px;
}

.sticky-height {
	height: 1000px;  // この高さだけ追従する
}Code language: JavaScript (javascript)

ポイントは、.sticky-height クラスで指定した高さだけスクロールに追従する、というところ。

あと、.sticky-height クラスが指定してある div 要素は、空である必要はありませんが、今回の動作には必要です。この要素無しで、代わりに margin-bottom を指定しても、期待した動作にはなりませんでした。

今回のHTMLを複数並べれば、1ページに複数の追従要素を作ることも可能です。

Can I use はこちら。

• CSS position:sticky - Can I use

IE では利用できませんが、最近は IE のシェアはほとんどありませんので、ウチみたく自由が利くサイトだとぼちぼち使ってもいいかな、とは思います。使えなくても追従せずに空白が空くだけですので。

2019年に AdSense の追従広告が解禁されましたが、その用途向けに便利なんじゃ？とは思います。

ただし、AdSense の規約上、追尾広告は1ページに1つまで。あと、今回のようなサイドバー追尾はデスクトップ向けのみと決められていたと記憶していますので、各自、注意しましょう。

もっとも、デスクトップページへのアクセスは、勤務時間中以外は、もうほとんど無い状態にはなってきているので、今後も意味は薄れて行きそうではありますが。