勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法

   2024/02/20  CSS

コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前に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

  関連記事

Bootstrap5系でよく使う要素及びClass名のまとめ記事

サンプルページやダッシュボード系のページを組む際にBootstrapを使うことが ...

SB Adminよりシンプル&軽量なBootstrap系ダッシュボードのテンプレートについて

ダッシュボード(管理画面)を作る際、SB Adminというテンプレートを利用する ...

CSSで一つの要素に対して複数の背景色を指定する方法

1つのdiv要素に対して複数の背景色をつけたかった。background-col ...

スマホサイトでviewportを指定しても横スクロールバーが表示される

スマホ用のサイトでviewportが指定されており、widthも100%になって ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...