ちょっと良いUIおれおれAdvent Calendar 2024 – 07日目
ちょっと文章が長い感じの文書でかつ見出しが特に有意なもの、というかまあ辞典とか技術文書なんかでスクロールしても見出しが付いてきて見えっぱなしになってくれると読みやすいことがあります。
ツール系だとツールバーや各種ヘッダーが付いてくると便利です。
デモ
position: sticky & top: 0
sticky の名の通りスクロール枠に粘着します。
top:0 を忘れがち。また背景色も指定しないと見づらくなります。
加えて、外側をひとつ <section> とか <div> とかで囲んでおいてください。囲みがない場合は sticky なものが指定位置で重なって、はみ出したものが見え続けることになります。囲んでおくとその囲みがスクロールで画面外へ移動するのと同時に sticky なものも一緒に移動してくれます。
overflow に注意
position: sticky はスクロール可能な要素に対して粘着します。当たり前といえば当たり前ですが、overflow: auto なんかが指定されていると「スクロールは可能だがまだ十分領域があるのでスクロールしない（バーも出さない）」なんて状態のときに（見た目でわからないので）何故粘着しないんだ、となっちゃいます。
粘着しない例：
おしまい
とか言っておいてここ ginpen.com ではやってません。そんなに長くないのでかえって邪魔かなと思います。
MDN みたいなサイドバーのやつもいいですね。あれは JS で制御かな。