勉強したことのメモ

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

  関連記事

CSSで1つの要素に複数classを設定して画像を入れ替える方法
CSSで1つの要素に複数classを設定して画像を入れ替える方法

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...

IE11でSB Admin2のログインページの表示がおかしい
IE11でSB Admin2のログインページの表示がおかしい

ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...

CSSとJavaScriptでテキストのコピー防止
CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...

「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法

「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...

Material Design LiteでiPhoneのみリンク(ボタン)をクリックしても動作しない場合の対応方法
Material Design LiteでiPhoneのみリンク(ボタン)をクリックしても動作しない場合の対応方法

最近サイト内のツールページ等をMaterial Design Liteで作ってい ...