スクロール途中から固定・解除する方法【CSSのみ】

CSSのみでスクロール固定・解除する

新しく追加された「position: sticky」を紹介します。
今までjQueryを使用しないとできなかったコンテンツを固定させ、途中で固定を解除させる処理をCSSだけで可能にするプロパティです。
脱jQueryと言われている今持ってこいのCSSですね!

 

ただ現状IEやedgeで対応していないのが問題ですが…。
edgeに関しいて今後対応してくれることを願ってます(^o^)

 

では早速実装してみよう!

 

 

 

「position: sticky」で固定コンテンツを作る

<div class="wrap">
<div class="box">
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
<div class="sticky">スクロールコンテンツ</div>
</div>

<div class="box02">コンテンツ2</div>

</div>

 

.wrap {
	width: 1000px;
	margin: 0 auto;
}
.box {
	height: 2000px;
	background-color: #C7C9E0;
	position: relative;
}
.sticky {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	background-color: #FB9A5B;
}
.box02 {
	height: 2000px;
	background-color: #D0ABAC;
}

 

デモページ

 

こんな感じ!
対象の要素の位置まで来たときにflexになっています。

 

 

必要なCSSを抜粋するとこの部分

.sticky {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0; /* 位置指定 */
}

 

 

まだまだ対応ブラウザの部分で問題は残っていますが今後期待ですね┌(_Д_┌ )┐

コメント