CSSだけで特定要素内でのみ画面にFIXさせたい

繁忙期につき、ご無沙汰しておりましたが、またブログを更新していきたいと思います！m(_ _)m

そんな繁忙期中に、サイドナビをFIXさせたい要望がありました…が、フッターの領域にはFIXナビを被らせたくない。

↓こんなイメージ（Sideの領域内のみ、画面FIXさせたい）

JavaScriptを使えば、まあ出来る事ではあるのですが、どうせならCSSだけでお手軽に出来ないかと調べてみました。

結構簡単に実装出来ちゃいますので、なかなかおススメですよ！

今回使用するのはposition: sticky;です。

…これだけです。
これだけで、JavaScriptを使用して実装していた動きが簡単にできちゃいます。

【サンプル】

【HTML】

<div class="sampleBox">Header</div>
<div class="sampleWrap">
	<div class="sampleLeft"><p>この要素がFIXします</p></div>
	<div class="sampleRight">Contents</div>
</div>
<div class="sampleBox">Footer</div>

 

 

【CSS】

div.sampleLeft{
position: relative; /* ←必要なもの */
}
div.sampleLeft p{
position: -webkit-sticky; /* ←必要なもの */
position: sticky; /* ←必要なもの */
top: 0;
right: 0;
}

※サンプルCSSはレイアウトのためのものは省いて、sticky関係（と親要素のposition指定）だけ入れています。

古いブラウザになるとサポートされていないので、ちょっと注意は必要ですが（IEには効いてくれません…）これから便利なCSSだと思います！

ブラウザの対応状況はこちらをご参照ください。

このstickyには、他にも色々使い道がありそうなので、またの機会にご紹介出来ればと思います。