スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法
2024/02/20
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeekatというjQueryプラグインを用いて作成する方法をメモしたが今回はCSSで行いたかった。
ソース
<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あたりを変更する。
関連記事
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート
新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...
-
-
Material Design LiteでiPhoneのみリンク(ボタン)をクリックしても動作しない場合の対応方法
最近サイト内のツールページ等をMaterial Design Liteで作ってい ...
-
-
CSSのdisplayについて
よく使うdisplayだけれども、noneとblock以外で 初めて使うことがあ ...
-
-
Flash上にHTMLのテキストやリンク(aタグ)を重ねる方法
FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...