position:stickyを使ってスクロールしながら片方を追従させよう

前回の記事でposition:stickyを使用してボタンを追従させましたが、コンテンツを左右2カラムに分けて、片側だけを追従させながらスクロールすることも可能です。

スポンサーリンク

position: stickyを使用して片側を追従させる方法

position: stickyを親要素の中の子要素に使用することに変わりはありません。 追従させたいカラムの中の子要素にposition: stickyを付けることになります。

サンプルページ

htmlは以下のようにしました。
親要素の中の子要素（左カラム）にposition: stickyを付けて追従させるイメージです。

html
<div class="stickybox_item">
    <div class="stickybox_item_side"><span>2024年 1月</span></div>
    <div class="stickybox_item_main">
        <ul>
            <li>10日13:00~</li>
            <li>会議室A（6人部屋）</li>
            <li>参加者：ねこ、いぬ、うさぎ、ぶた</li>
        </ul>
        <ul>
            <li>20日17:00~</li>
            <li>会議室b（4人部屋）</li>
            <li>参加者：ねこ、いぬ、うさぎ</li>
        </ul>
        <ul>
            <li>25日17:00~</li>
            <li>会議室b（4人部屋）</li>
            <li>参加者：ねこ、いぬ、りす</li>
        </ul>
    </div>
</div>

親要素（stickybox_item）の中の左カラムの子要素（stickybox_item_side）にposition: stickyを付けて、年と月のエリア（左の子要素）を追従させます。

cssは以下のようにしました。
左カラムの子要素を梱包している部分にposition: stickyを付けています。

css
.stickybox_item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 60px;
}
.stickybox_item_side {
	position: sticky;
	width: 25%;
	top: 10px;
	left: 0;
}
.stickybox_item_main {
	width: 75%;
}

※position: stickyに関係する親要素・子要素のcssのみ記載。デザインに関する部分はこの説明においては省略しています。

position: stickyがセクションごとに複数ついている場合は、position: stickyがついている部分が指定の場所にたどり着くとそのエリアが追従になります。
今回のサンプルページでは、左カラムの子要素（年と月のエリア）の部分にposition: stickyをそれぞれ付けているため、スクロールしていくと左カラムの子要素の追従がセクションごとに切り替わるようになります。

position: stickyが効かないときに確認すること

前回の記事では、position: stickyを適用した要素の親要素に、overflow: hiddenが適用されていると動作しないということを注意事項として補足説明しましたが、今回の場合は動作しないときに確認することがもうひとつ増えます。

それは、align-itemsの一部のプロパティを付けないと動かないようです。
片方のみを普通に追従させるのであれば、align-items:flex-startを付ければ問題なさそうです。

PAGE TOP