スクロールしても追尾する要素をプラグイン等は利用せず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のdisplayについて
よく使うdisplayだけれども、noneとblock以外で 初めて使うことがあ ...
jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...
CSSで一つの要素に対して複数の背景色を指定する方法
1つのdiv要素に対して複数の背景色をつけたかった。background-col ...
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
Bootstrap5系でよく使う要素及びClass名のまとめ記事
サンプルページやダッシュボード系のページを組む際にBootstrapを使うことが ...