「CSSだけで特定要素内でのみ画面にFIXさせたい」…を応用して、FIXするボタンをつけてみる

よく見かける、色々な条件を指定して検索する条件検索のフォーム。
指定できる項目が多く、検索ボタンがページの下の方になってしまって、いちいち下までスクロールしないといけない事に…

ページの下までスクロールしなくても、検索ボタンがわかるように出来ないかとと考えていたところ、
前回「CSSだけで特定要素内でのみ画面にFIXさせたい」の記事でご紹介した、特定要素内だけでFIXさせるCSSを応用して、検索用フォームの個所にだけ、うまい事ボタンを表示できるのでは！
と思い至った次第です。

無論、JavaScriptは使わず、CSSだけで実現しちゃいます。

【サンプル】

 

前回同様、必要なCSSだけ見てみると、とてもシンプルです。

【HTML】

<div id="sample01">
    <ul>
    	<li><label><input type="radio" name="sample"> なんやかんや</label></li>
    </ul>
    <p class="sample_btn"><a href="#">画面にFIXします（特定要素内のみ）</a></p>
</div>

【CSS】

#sample01{
position:relative; /* ←必要なもの */
}
#sample01 p.sample_btn{
position: -webkit-sticky; /* ←必要なもの */
position: sticky; /* ←必要なもの */
bottom: 0; /* ←今回は画面の下にFIX */
}

これなら、検索フォームのどこを表示していても、すぐにボタンを押せちゃいますし、検索フォームよりも下にはボタンはついてこないので、邪魔にもなりませんね。

一昔前はJavaScriptとかなんやかんや使わないと出来なかったものが、CSSのほんの1,2行で出来てしまうと、気持ちのいいもんです。

※IEは対応してくれませんので、IE対策はしておきましょう。