勉強したことのメモ

webプログラマが勉強したことのメモ。

スクロールしても追尾する要素を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

  関連記事

ページング用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で検索する為にコピペしようとするも、 ...