スクロールしても追尾する要素をプラグイン等は利用せず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で1つの要素に複数classを設定して画像を入れ替える方法
メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
IE11でSB Admin2のログインページの表示がおかしい
ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...
-
-
CSSとJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...