勉強したことのメモ

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

スクロールしても追尾する要素をCSSで作成

2018/05/20 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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<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あたりを変更する。

関連記事

: jQueryとCSSの連携

$(function(){ $("#change_small").click(f ...

: CSSで1つの要素に複数classを設定して画像を入れ替える

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...

: CSSでマウスカーソルの変更

マウスカーソルはCSSで任意に決められるみたい。リンク時に一律させた方がよいと ...

: CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...

: firebugでCSSパスをコピー

要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...

: CSSでセンターリング

<center></center>でセンターリングが出来 ...

: スマホ用の有料デザインテンプレが9月内は無料でもらえた

envatomarketでスマホ用の有料デザインテンプレートが2014年9月内に ...

: 可変要素内の文字を丸める

可変の要素内の文字を丸めたかった。いつもであればPHPのmb_strimwidt ...

: 特定のブラウザのみCSS指定

FireFoxだけどうにもデザインが崩れる、ただ他のブラウザでは希望通りのデザ ...

: Flash上にHTMLの文字やリンクを重ねる方法

FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...

PREV: Googleアナリティクスのデータ保持設定
NEXT: 複数のajax処理の結果をまとめて表示