sticky要素の扱い方

難易度：★★★☆☆

前書きとサンプル
スティッキーアイテムの導入方法
1. 位置設定の注意点
スティッキーアイテムの可動領域

前書きとサンプル

CSSのpositionプロパティにsticky(スティッキー)という値があります。
これは、absolute,fixedのような絶対配置とも相対配置とも付かないような
振舞いをする為、私も含め、最初から苦手意識を持ってしまうかも知れません。

まず、sticky要素を実装すると、視覚的にどのような動きをするか、
サンプルページを使って見てみましょう。

サンプルページへ

スティッキーアイテムの導入方法

スティッキー要素は、これらのうち何れかのプロパティを指定する必要があります。

top位置(必須)
left位置(場合により必須)
margin-left
margin-right

フレックスボックスは、直下の子要素の位置などを変更しますが、
position: sticky;を指定した場合、要素そのものが「スティッキーアイテム」、
親要素が「スティッキーコンテナ」になります。

可動範囲が「スティッキーコンテナ」ですが、
あらかじめ大きさを指定する必要がある場合があります。

位置設定の注意点

サンプルでは、top位置を0としていますが、先頭の::beforeと重なる事はありません。
スティッキーアイテムを画面上部までスクロール※された際、
初めてスティッキーアイテムとして振る舞い、::afterより浮き上がらせる事が出来ます。

※
正しくは表示領域トップ+スティッキーアイテムのtop位置に到達した時

スティッキーアイテムの可動領域

HTML


<div class="sticky-sampling">
    <p class="message">申し訳ありませんが、現在の画面比率ではご覧になれません。</p>
    <section>
        <div class="sticky-container">
            <div class="sticky-box"><span>sticky</span></div>
        </div>
        <div class="section-area"><span>領域外</span></div>
    </section>
</div>

CSS


.sticky-container{
	background-color: #b0c4de;
	padding: 2%;
}

.sticky-container::before,
.sticky-container::after{
	display: block;
	color: #fff;
	font-size: 3vmax;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sticky-container::before{
	width: 50vmin;
	height: 50vmin;
	content: "before";
	background-color: red;
}

.sticky-container::after{
	width: 100%;
	height: 200vh;
	content: "after";
	background-color: blue;
}

.sticky-container .sticky-box,
.sticky-sampling .section-area{
	display: flex;
	align-items: center;
	justify-content: center;
}

.sticky-container .sticky-box{
	position: sticky;
	top: 0;
	left: calc(15vmin + 2%);
	width: 35vmin;
	height: 35vmin;
	background-color: yellow;
	color: #000;
	font-size: 3vmax;
}

.sticky-sampling .section-area{
	height: 200vh;
	background-color: #32cd32;
	color: #000;
	font-size: 5vmax;
}

.sticky-sampling .message{
	display:none;
}

@media (min-aspect-ratio: 3.5/1){
	.sticky-sampling section{
		display:none;
	}
	
	.sticky-sampling .message{
		display:block;
	}
}

解説

スティッキーアイテムは、絶対配置とは違う為、
スティッキーコンテナにスティッキーアイテムが挿入されると、その分だけ拡張します。
また、スティッキーアイテムは、絶対配置とは異なり、top,leftそれぞれ0を指定しても、
スティッキーコンテナのパディング内より外に出る事はありません。

また、今回のサンプルでは空の要素を用い、
サイズを機械的にvh,vminで設定している為、
特殊な画面比率では正常に表示されない場合があります。

新しいメディアクエリ“@media (min-aspect-ratio: 3.5/1)”では、
ビューポートの横幅÷縦幅=3.5以上の場合にプロパティの値を変更します。
メディアクエリを使用する場面では、
ほぼほぼ“@media screen and (max-width:781px)”のようなものですが、
比率でも設定出来る事を覚えておくと、レスポンシブウェブデザインの多様性が広がります。