勉強したことのメモ

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

  関連記事

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

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

特定のID / Classを持つタグの親要素に対してCSSを割り当てる方法

特定のID / Classを持つタグの親要素に対してCSSを割り当てたい。また、 ...

CSSのpointer-eventsプロパティで指定した要素をクリック不可にする方法

ページ内の指定のボタンをクリックしても動作しないという症状が発生し、ソースコード ...

jQuery無しで要素にアニメーション効果を設定する方法(animate.css)

あるサイトをWappalyzerで調査していた際に「animate.css」とい ...

CSSでカラーコード等を変数(カスタムプロパティ)として使用する方法

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