画面を下にスクロールしていっても、次の「見出し」に到達するまでの間、画面上部に付いてくる「見出し」を作成出来そうな CSS の position : sticky のテスト。

粘着性？

今回は、 CSS の position プロパティに sticky の値を指定した場合のテストを行ってみました。

何かの HTML 要素に「position : sticky」と「top : 0px」の CSS ルールを指定した場合、 HTML 要素上端と画面上端までの間隔が 0px 以下になると、次の sticky までの間、 HTML 要素が、その位置に固定表示されるようです。

sticky（スティッキー）の英語の意味をインターネットの辞書で調べてみると、「粘着性のある」という意味が出てきました。

サンプルページを作成して試してみます。

「position : sticky」と「top : 0px」を指定した HTML 要素「text1」の上端と画面の上端の間隔が 0px 以下になると「text1」が固定される。

目次まで戻る

サンプル

以下の URL でサンプルページをご覧いただけます。

CSS position:sticky テスト: https://pulogu.net/wordpress/wp-content/uploads/2023/11/css-position-sticky.html

サンプルページのソースコードは以下のようになっています。

CSS :

.a{
  position:sticky;
  top: 0px;
  background-color: yellow;
  border: solid 3px black;
}

HTML :

<h2 class="a">text1</h2>
<p>text 1-1</p>
<p>text 1-2</p>
<p>text 1-3</p>
<p>text 1-4</p>
<p>text 1-5</p>
<h2 class="a">text2</h2>
<p>text 2-1</p>
<p>text 2-2</p>
<p>text 2-3</p>
<p>text 2-4</p>
<p>text 2-5</p>
<h2 class="a">text3</h2>
<p>text 3-1</p>
<p>text 3-2</p>
<p>text 3-3</p>
<p>text 3-4</p>
<p>text 3-5</p>
<p>copyright 2023 pulogu.net</p>

サンプルページ全体のスクリーンショットは以下の画像のようになっています

「text1」「text2」「text3」が「position : sticky」「top : 0px」になっています。