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

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

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

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

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

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

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

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

【サンプル】

Header

この要素がFIXします

Contents
Footer

【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には、他にも色々使い道がありそうなので、またの機会にご紹介出来ればと思います。

カテゴリーCSS