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


今回は

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

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

考え方

追従ボタン

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

あっさり解決しました。。。

意外と簡単です。

右下のポジショニング

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

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

これもあっさり解決。

クローズボタン処理

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

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

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

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

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

初期から表示させた追従領域(.followcard)を画面内においておきます。 
追従領域には、2つ目のラジをボタンをチェックできるラベルを乗っけておき、クリックしたら2つ目のラジオボタンが押されるようにしておきます。押された状態の時CSSで非表示になるように設定します。

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

実例

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

コード

 

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

 

 

 

関連ページリンク

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

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

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

 

 

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




コメントを残す

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