スクロールしても追尾する要素をCSSで作成
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeekatというjQueryプラグインを用いて作成する方法をメモしたが今回はCSSで行いたかった。
サンプル
http://sample.taitan916.info/tracking/
ソース
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>追尾要素のサンプル</title> <style> .contents{ height: 2000px; } .tracking { position: fixed; left:0; top: 100px; background: blue; color: #fff; width:200px; } </style> </head> <body> <div class="contents"> <div class="tracking"> 追尾要素のサンプル </div> </div> </body> </html>
表示場所を変えたい場合はtop / leftあたりを変更する。
関連記事
-
-
ページング用CSS
div.pageNav { //これなくてもいいかも。 clear: both; ...
-
-
フォームCSS
body { font-family : 'メイリオ',Meiryo,'MS P ...
-
-
CSSでマウスカーソルの変更
マウスカーソルはCSSで任意に決められるみたい。 リンク時に一律させた方がよいと ...
-
-
スマホサイトでviewportを指定しても横スクロールバーが表示される
スマホ用のサイトでviewportが指定されており、widthも100%になって ...
-
-
LINE風のふきだしデザイン
LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...
-
-
スマホ用の有料デザインテンプレが9月内は無料でもらえた
envatomarketでスマホ用の有料デザインテンプレートが2014年9月内に ...
-
-
固定ヘッダーメニュー
やりたかった事は、 ・6つぐらい異なるドメインのページがある ・似たような用途な ...
-
-
formのsubmitをボタンを無くしたり画像をつけたりCSSで装飾
aタグになっていたところをsubmitボタンに変えてほしいという修正依頼があった ...
-
-
ページ内リンク(アンカーリンク)がずれる場合の対処法
ヘッダーに固定メニューを設置しており、コンテンツ部分でアンカーリンクを使うと固定 ...
-
-
CSSとJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...
- PREV
- Googleアナリティクスのデータ保持設定
- NEXT
- 複数のajax処理の結果をまとめて表示