勉強したことのメモ

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

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

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

2018/05/20 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あたりを変更する。

関連記事

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

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

: セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法

セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...

: tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法

tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...

: Material Design Liteでセレクトメニュー(プルダウン)の作成方法

Material Design Liteでformのセレクトメニュー(プルダウン ...

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

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