スクロールしても追尾する要素をプラグイン等は利用せず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あたりを変更する。
関連記事
CSSのopacity
opacityというプロパティを業務中に見かけたのでメモ。 透明度を指定するもの ...
Flash上にHTMLのテキストやリンク(aタグ)を重ねる方法
FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
CSSのdisplayについて
よく使うdisplayだけれども、noneとblock以外で 初めて使うことがあ ...
SB Adminよりシンプル&軽量なBootstrap系ダッシュボードのテンプレートについて
ダッシュボード(管理画面)を作る際、SB Adminというテンプレートを利用する ...