【CSS】追従するボタンをできるだけシンプルにCSSだけで実装してみた【動作実例付き】


今回は

よく宣伝とか、メニューとか、ソーシャルボタンが、 画面を下にスクロールしても画面の同じ場所に張り付いていることがありますよね。

今回はそれを実装してみたいと思います。

考え方

追従ボタン(固定位置表示)

やり方は、固定するため absolute, relativeでもなく、position に fixedするだけ。ボタンは重なった時に一応 一番上に表示されるよう z-indexを大きめに設定します。

あっさり解決しました。。。
意外と簡単です。

右下のポジショニング

さらに 左上ではなく、右下に載せる方法も考えてみます。

調べてみると vh, vw という
ビューポート width ,
ビューポート heightという単位がありました。

これで画面サイズに合わせた割合を簡単に指定できます。つまりドキュメント座標(document内)の位置ではなく、ビューポート(ブラウザの表示範囲での位置)で指定できるので、画面右下などと指定できます。

これもあっさり解決。

クローズボタン処理

さらにクローズボタンです。 JSでないと、実現できないかなと思いましたが、こちらのテクを応用することで対応できることを思い出しました。CSSだけで作るシンプルなタブメニューの骨格

フォーカスやマウスオーバーでは、マウスが乗っているときしか作動しないため。永久に消えた状態にできません。ステータスを2段階固定する方法を考えたら、 radioボタンを使った解決策です。

ステータスとしては以下のように、ボタン押下前後で状態を切り替えます。

初期状態(表示)→ {Xボタンクリック}→ クローズ状態(非表示)

まとめると

これまで考慮した内容をまとめて形にしてみます。

HTML構造

⦿ raido button #start チェック済み
○ radio button #out
.followcard
label for #out(x closeボタン)

初期状態と非表示の2つのステータスを表すものとして、
ラジオボタンを2つ用意します。

ラジオボタン は2つともUI上紛らわしいので、
display:none; で消しておきます。

初期状態を表すラジオボタン(#start)を最初checkしておきます

初期から表示させたクローズボタン(label)を載せた
追従領域(.followcard)を画面内においておきます。 
初期状態: visiblity :visible

位置は 90%あたりに置いておきます
position: fixed;
top: -webkit-calc(90vh - 20px);
top: -moz-calc(90vh - 20px);
top: calc(90vh - 20px);
left:90vw;
z-index: 999;

追従領域には、2つ目のラジオボタン(#out)をチェックできるラベルを乗せておき、クリックしたら2つ目のラジオボタンが押されるようにしておきます。

押された状態の時CSSで非表示になるように設定します。
CSSにおける具体的設定としては
#outがチェックされていると、
その兄弟要素である .followcardを消します。

カーソルも、リンク用に変えインタラクションを考慮します。
cursor:pointer

実例

右下の青枠。スクロールして確認してみてください。

この ページの動作実例sampleでは 、
操作できるようにinput を表示させてます。↓

コード

.followcard {
	position: fixed;

	top: -webkit-calc(90vh - 20px);
	top: -moz-calc(90vh - 20px);
	top: calc(90vh - 20px);
	left:90vw;
	z-index: 999;

	visibility: visible;

	margin-left:16px;
	padding:10px;
	border-radius: 8px;
	background:#77f;
}
.followcard label{
	cursor:pointer;
	color:white;
}
input#out:checked ~ .followcard{
	visibility: hidden;
}
.flow input{
	display:none;
}

 calcについて:CSSでは  - を文字の一部として解釈機が扱うため、 +、ーは前後に空白による区切り指定が必要です。

関連ページリンク

一手間だけでWebページをちょっとおしゃれな雰囲気に変える方法【css】

CSSスプライトで、イメージ画像の一部のみ表示させる端的な方法

CSSだけでモーダルダイアログをシンプルに実現してみる

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

2,828 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です