前のバージョン(56)で Chrome が CSS の position: sticky; に対応しました

最初はページ途中にあるヘッダ部分を途中から fixed にしてついてくるようにしたいときに使うもの と思ってたのですが float で並べたサイドバーでもいけるみたい

ブログのサイドバーとかはこれにしようかな って考えて試してみてるとスクロールに対応してない問題がありました

最後までスクロールしないとサイドバーの下の方を見れないのは不便で そこまで万能じゃないのかなあと思ってたのですが flexbox 使えば可能でした

CSS は自分でこう組み合わせたらいけるんじゃないかな と思ったのを試してみるとけっこう動いてくれるので試しながら使ってるのが楽しいですよね

sticky header

よくある例のヘッダーがついてくるやつ

ページ内のテーブルヘッダがついてくるのはよく見かけるかと思います
あれが簡単に書けます

個人的にそれよりもいいなと思ったのは チャットツールの日付みたいな見出しが気持ち良い感じに切り替わるところ

サンプル


[html]

<h1>4/1</h1>
<section>
	<div>ながーいテキスト</div>
</section>
<h1>4/2</h1>
<section>
	<div>ながーいテキスト</div>
</section>
<h1>4/3</h1>
<section>
	<div>ながーいテキスト</div>
</section>
<h1>4/4</h1>
<section>
	<div>ながーいテキスト</div>
</section>

こういう HTML で

[css]

h1 {
	position: sticky;
	top: 0;
}

こうするだけでいい感じに日付部分が切り替わってくれます

sticky sidebar

次にサイドバー

サンプル

[html]

<section>
	<main class="column">
		<div>ながあぁあいテキスト</div>
		<div>ながあぁあいテキスト</div>
	</main>
	<aside class="column">
		<div>ながあぁあいテキスト</div>
	</aside>
</section>

この HTML に

[css]

section:after{
	content: "";
	display: block;
	clear: both;
}

.column{
	width: 50%;
	float: left;
	position: sticky;
	top: 0px;
}

これで短い方のカラムが途中からなくなることはなくなります
.column にスタイル指定して両方のカラムが sticky なのでブログの本文がサイドバーよりも長いときと短いときどっちでも対応できます

注意するところは section:after で指定してる clearfix

clear:both; をしないといけなくて section に overflow: hidden; する方法だと動きませんでした


この方法の一番の問題は短い方はスクロールせずに常に一番上の状態でついてくること



こういうことになります
右側が短くて 10 行以上はあります

なのに左側が最後になるまでずっと 1 行目が表示され続けます
右側の一番下を見るには長い方の左側の最後までスクロールが必要です

ほしかったものは 短い方の一番下に達するまでは 普通のページのようにスクロールして 短いほうが終わったらそのままの状態を維持してくれるものです

sticky-kit の 「Scrollable Sticky Element」 のサンプルが目的のものです

今の sticky だと一番下まで行って 上にスクロールした時がその動きになります

逆なので top じゃなく bottom ？ と単純に考えてみたのですが bottom にすると固定されなくなるだけで動かなくなりました

sticky sidebar flex

上では float でしたが flexbox でも使えます

サンプル

さっき同じ HTML で CSS だけ変更します

[css]

section{
	display: flex;
	align-items: flex-start;
}

.column{
	width: 50%;
	flex: none;
	position: sticky;
	top: 0px;
}

こっちでは clearfix の代わりに align-items に注意が必要です
align-items を指定しないとデフォルトの stretch になっていてカラムの高さが一緒になります

なので flex-start を指定して上に来るようにします

スクロールさせる

これだと float のときと一緒で 長い方の最後までスクロールしないと短い方の最後が見えません

align-items を flex-end にしたら bottom と組み合わせていけるんでは？ と思って試してみたら動きました

サンプル

[css]

section{
	display: flex;
	align-items: flex-end;
}

.column{
	width: 50%;
	flex: none;
	position: sticky;
	bottom: 0px;
}

最初のスクロールは 両方同じようにスクロールします



短い右側が下までいくと左だけのスクロールになります



ただ今度は 上に戻るときには 長い方の一番上までスクロールしないといけません
sticky-kit のようなスクロールできたらスクロールして できないならついてくる って言うわけにはいきません

まぁ上に行くことはそうないから別にいいかな


近いうちにブログテンプレートを変更しよ