スクロールしても追尾する要素をCSSで作成
2018/05/23
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前に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あたりを変更する。
関連記事
-
-
formのsubmitをボタンを無くしたり画像をつけたりCSSで装飾
aタグになっていたところをsubmitボタンに変えてほしいという修正依頼があった ...
-
-
上部に固定されたヘッダーメニューの作成
■やりたい事 ページスクロールしても上部に固定されたヘッダメニューの作る &nb ...
-
-
CSSでセンターリング
<center></center>でセンターリングが出来 ...
-
-
CSSで1つの要素に複数classを設定して画像を入れ替える
メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...
-
-
CSSでマウスカーソルの変更
マウスカーソルはCSSで任意に決められるみたい。 リンク時に一律させた方がよいと ...
-
-
ダウンロード無しで外部ファイル呼び出し
■jQuery http://scriptsrc.net/ ■bootstrap ...
-
-
LINE風のふきだしデザイン
LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
-
-
フォームCSS
body { font-family : 'メイリオ',Meiryo,'ＭＳ Ｐ ...
-
-
特定のブラウザのみCSS指定
FireFoxだけどうにもデザインが崩れる、 ただ他のブラウザでは希望通りのデザ ...
- PREV
- Googleアナリティクスのデータ保持設定
- NEXT
- 複数のajax処理の結果をまとめて表示