勉強したことのメモ

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でカラーコード等を変数(カスタムプロパティ)として使用する方法

他社が作成されたCSSのソースコードを拝見していると、背景等の色を指定する部分に ...

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

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

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

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

画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法

Lightboxを使用しているページで画像をクリックすると拡大表示されることをユ ...

CSSを用いて可変(レスポンシブ)要素内での文字列を丸める方法

可変(レスポンシブ)要素内の文字を丸めたかった。いつもであればPHPのmb_st ...