位置のいくつかの巧妙な応用の詳細な説明:sticky スティッキーポジショニング

背景: position:sticky はスティッキー配置とも呼ばれます。スティッキー配置の要素は、ユーザーのスクロールによって position:relative と position:fixed の配置を切り替えます。要素は通常のドキュメントフローに従って配置され、上、右、下、左の値に基づいて、最も近いスクロール祖先と包含ブロック (最も近いブロックレベルの祖先)、テーブル関連要素を基準にオフセットされます。

スティッキーポジショニングは、相対ポジショニングと固定ポジショニングのハイブリッドと考えることができます。要素は、特定のしきい値を超えるまでは相対的に配置され、その後は固定されます。例えば：

#one { 位置: スティッキー; 上部: 10px; }

上記のスタイルが設定された要素の場合、ビューポートが要素の上端から 10 ピクセル未満の距離までスクロールするまで、要素は相対的に配置されます。その後、ビューポートがしきい値以下にスクロールするまで、要素は上端から 10 ピクセルの距離に固定されます。

知らせ：

要素の配置は、特定のしきい値を超えるまでは相対配置として動作し、その後は固定配置になります。
スティッキー配置を有効にするには、上、右、下、または左のしきい値のいずれかを指定する必要があります。それ以外の場合は、相対配置と同じように動作します。
オフセット値は他の要素の位置には影響しません。この値は常に新しいスタックコンテキストを作成します。
スティッキー要素は、その祖先が最も近い実際にスクロール可能な祖先ではない場合でも、スクロールメカニズムを持つ最も近い祖先 (その祖先のオーバーフローが hidden、scroll、auto、または overlay の場合) に固定されます。

アプリケーション例

1. 基本：頭部の固定

ヘッダーナビゲーションバーは、最初は上部に対して相対的に配置されます。ページ要素がスクロールされると、fixed と同様に固定された位置になります。

<メインクラス="メインコンテナ">
  <header class="main-header">ヘッダー</header>
  <div class="main-content">メインコンテンツ</div>
  <footer class="main-footer">フッター</footer>
</メイン>

.メインコンテナ{
  最大幅: 500px;
  高さ: 500px;
  マージン: 0 自動;
  上マージン: 40px;
  オーバーフロー:自動;
}
.メインコンテナ *+* {
  上マージン: 20px;
}
.メインヘッダー{
  高さ: 50px;
}
.メインコンテンツ{
  最小高さ: 600px;
}
.メインヘッダー{
  位置: -webkit-sticky;
  位置: 固定;
  上: 0;
}

2. 基本: 固定フッター

フッター固定効果も、最初は相対的に固定された配置効果です。ページがフッターを超えてスクロールすると、フッター配置効果は相対的な配置効果になり、下部の情報や広告を表示するために使用できます。

<メインクラス="メインコンテナ">
  <header class="main-header">ヘッダー</header>
  <div class="main-content">メインコンテンツ</div>
  <footer class="main-footer">フッター</footer>
</メイン>
<div class="devide"></div>

.メインコンテナ *+* {
  上マージン: 20px;
}
.メインヘッダー{
  高さ: 50px;
}
.メインコンテンツ{
  最小高さ: 600px;
}
.メインフッター{
  位置: -webkit-sticky;
  位置: 固定;
  下部: 0;
  境界線の色: 赤;
}
.devid {
  高さ: 600px;
}

3. 基本: 固定サイドバー

ページがスクロールして位置がサイドバーの上部しきい値を超えると、サイドバーは固定され、サイドナビゲーションバーやサイドプロンプト情報および広告表示を実装するために使用できます。

<div class="スクロール">
  <div class="wrapper cf">
    <div class="content">
      <h1>下にスクロールしてください!</h1>
      <p>住人は非常に健康で、体格も良く、男性としての名声も高い。体は非常に強く、健康で、活動的で、温かい。私は非常に寒い場所に住んでいます。空気は非常に健康的です。モーリシャスは非常に古いです。</p>
      <p>私はとても気分が悪い、とても疲れている、とても疲れている、とても疲れている、とても疲れている、とても疲れている、とても疲れている！私はとても疲れている！</p>
    </div>
    <div class="サイドバー">
      <h3>サイドバー</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime fugiat perspiciatis.</p>
    </div>
  </div>
</div>

.cf:before、.cf:after {
  コンテンツ： " ";
  表示: テーブル;
  クリア: 両方;
}
.cf {
  *ズーム: 1;
}
.スクロール{
  高さ: 500px;
  オーバーフロー: スクロール;
  パディング: 0 10px;
  最大幅: 500px;
  マージン: 40px 自動;
  背景: #FFFFFF;
}
。コンテンツ {
  パディング: 0 15px;
  幅: 280ピクセル;
}
.サイドバー{
  パディング: 20px;
  幅: 170ピクセル;
  背景: #2D2D2D;
  色: #FFFFFF;
}
.コンテンツ、.サイドバー{
  フロート: 左;
}
.サイドバー{
  位置: -webkit-sticky;
  位置: 固定;
  上: 15px;
}

4. 基本: リストアンカー

ページスクロールアンカーの固定効果を実現するには CSS のみを使用できます。これを使用して、アドレス帳のスクロール、ログレコードのスクロール、その他のカテゴリリストのスクロール効果を実現できます。

 <div class="コンテナ">
  <div class="list">
    <div class="リストグループ">
      <div class="list-header">あ</div>
      <div class="list-content">
        <div>アップル</div>
        <div>アーティチョーク</div>
        <div>ツチブタ</div>
        <div>アリ</div>
        <div>どんぐり</div>
      </div>
    </div>
    <!-- ... -->
    <div class="リストグループ">
      <div class="list-header">D</div>
      <div class="list-content">
        <div>犬</div>
        <div>日付</div>
        <div>デンマーク語</div>
        <div>タンポポ</div>
      </div>
    </div>
  </div>
</div>

@supports CSS @-rule 1 つ以上の特定の CSS 機能に対するブラウザーのサポートに依存する宣言を指定できます。これは機能クエリと呼ばれます。このルールは、コードの最上位レベルに配置することも、他の条件付きグループルール内にネストすることもできます。

@supports (位置: 固定) {
  .リストヘッダー{
    位置: 固定;
    上: 0;
  }
}
。容器 {
  幅: 500ピクセル;
  高さ: 500px;
  マージン: 40px 自動;
  位置: 相対的;
  オーバーフロー:自動;
}
.リスト{
  最小高さ: 1600px;
  背景: #FFFFFF;
}
.リストコンテンツ{
  パディング: 10px 20px;
}
.リストヘッダー{
  パディング: 10px;
  背景: #2D2D2D;
  色: #FFFFFF;
  位置: 相対的;
  フォントの太さ: 太字;
}

5. 高度な設定: テーブルヘッダーの固定

テーブル要素の th または tr 要素に position: sticky を設定すると、テーブルヘッダーまたは行を固定したり、複数のテーブルを結合したりできます。現在のテーブルにスクロールすると、固定されたヘッダーが自動的に現在のテーブルのヘッダーになります。

<div class="コンテナ">
  <テーブル>
    <頭>
      <tr class="red">
        <th>名前</th>
        <th>年齢</th>
        <th>仕事</th>
        <th>色</th>
        <th>URL</th>
      </tr>
    </thead>
    <t本文>
      <tr>
        <td>ロレム。</td>
        <td>ウラム。</td>
        <td>ベル。</td>
        <td>で。</td>
        <td>質問です。</td>
      </tr>
      <!-- ... -->
      <tr class="green">
        <th>名前</th>
        <th>年齢</th>
        <th>仕事</th>
        <th>色</th>
        <th>URL</th>
      </tr>
     <!-- ... -->
    </tbody>
  </テーブル>
</div>

。容器 {
  高さ: 500px;
  幅: コンテンツに合わせる;
  マージン: 40px 自動;
x オーバーフロー: 自動;
}
テーブル {
  テキスト配置: 左;
  位置: 相対的;
  境界線の折りたたみ: 折りたたみ;
}
th、td {
  パディング: 0.25rem;
}
tr:n番目の子(偶数) {
  背景: #EFEFEF;
}
tr.red th {
  背景: #dd4a63;
  色: 白;
}
tr.green th {
  背景: #03C03C;
  色: 白;
}
tr.blue th {
  背景: #1580d8;
  色: 白;
}
番目 {
  背景: 白;
  位置: 固定;
  上: 0;
}

6. 上級: ページ進捗バー (シンプル)

position:sticky; 配置を使用すると、ページ閲覧のプログレスバー効果を実現できます。以下は、シンプルなプログレスバーのデモンストレーションです。実際の実装では、一番上までスクロールされていない要素を透明色に設定し、一番上までスクロールすると青色に変更できます。

<div class="コンテナ">
  <h1>スティッキー プログレス</h1>
  <div class="sticky"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis, nostrum expedita.</p>
  <!-- ... -->
  <div class="sticky"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis, nostrum expedita.</p>
</div>

。容器 {
  幅: 500ピクセル;
  高さ: 500px;
  オーバーフロー:自動;
  マージン: 40px 自動 40px;
  パディング下部: 500px;
  ボックスのサイズ: 境界線ボックス;
}
.スティッキー{
  幅: 50px;
  高さ: 10px;
  背景: rgba(36, 167, 254, 0.979);
  位置: -webkit-sticky;
  位置: 固定;
  上: 0;
}
.sticky:型のn番目(2) {
  変換: translateX(50px);
}
.sticky:n番目の型(3) {
  変換: translateX(100px);
}
.sticky:型のn番目(4) {
// ... 
.sticky:n番目の型(10) {
  変換: translateX(450px);
}

7. 詳細: ページ進行状況バー (最適化)

最適化された進行状況バーは、ブラウジングの進行状況のパーセンテージ表示をサポートし、ユーザーエクスペリエンスの向上に役立ちます。

<記事>
  <div class="記事タイトル">
    <h1>ページ進捗バーの例</h1>
    <div class="progress-wrapper">
      <div class="progress-label"></div>
      <進捗状況></進捗状況>
    </div>
  </div>
  <画像ソース=""/>
  <p><em>すべての画像は Codepen アセットからランダムに提供されます。すべての ipsum テキストは officeipsum.com から提供されます。</em></p>
  <p>フェイスタイムで、競技場を平等にしましょう。すぐに勝てるベンチマークを組み込むか、両側でパドルを漕ぎます。車輪の再発明。このポジションに採用された場合、テーブルに何をもたらすと思いますか。消火栓から飲み込んでください。しかし、四半期の売上は過去最低です。または、ユニットあたりのコストを概算できますか。私たちには余裕がありません。</p>
  <!-- ... -->
  <画像ソース=""/>
  <p>顔を洗うのに十分な暗殺者との出会い。レストランでヘレンに偶然会った後、彼女はただのオフィスのかなり良い光学機器で、レコードをかけて誰が踊るか見てみよう、それでも私たちはその点、または個人的な開発で先を進んでいます。ベンチマークはヘリコプタービューのハイライトを強化し、5分かけて木を殴り、頭をすっきりさせてここに戻ってきて、市場をリードするプラットフォームを持つという私たちのビジョンを翻訳し、eowの成果物のステータスはどうなっていますか?</p>
</記事>

：根 {
  --プログレスバーの高さ: 4px;
  --progress-bar-color: ゲインズボロ;
  --progress-bar-value-color: ドジャーブルー;
  --プログレスバーの値: 20%;
}
記事 {
  位置: 相対的;
  パディング: 24px;
  幅: 100%;
  最大幅: 700px;
  マージン: 60px 自動;
}
.記事タイトル{
  位置: 固定;
  上: 0;
  パディング下部: 24px;
}
画像 {
  幅: 100%;
  下部マージン: 18px;
}
.progress-wrapper {
  位置: 相対的;
}
.progress-label {
  位置: 絶対;
  右: 0;
  下部: 0;
  フォントサイズ: 14px;
}
進捗
  -webkit-appearance: なし;
  -moz-appearance: なし;
  外観: なし;
  位置: 絶対;
  幅: 100%;
  高さ: var(--progress-bar-height);
  背景色: var(--progress-bar-color);
  境界線: なし;
}
進捗状況::-moz-進捗状況バー {
  背景色: var(--progress-bar-value-color);
}
進捗状況::-webkit-進捗状況バー{
  背景色: var(--progress-bar-color);
}
進捗状況::-webkit-進捗状況値{
  背景色: var(--progress-bar-value-color);
}
進捗状況::-ms-fill {
  背景色: var(--progress-bar-value-color);
}

パーセンテージを計算して表示する

$(ドキュメント).ready(関数() {
  定数win = $(window);
  ドキュメントを宣言します。
  const プログレスバー = $('progress');
  const progressLabel = $('.progress-label');
  const setValue = () => win.scrollTop();
  const setMax = () => doc.height() - win.height();
  const setPercent = () => Math.round(win.scrollTop() / (doc.height() - win.height()) * 100);
  progressLabel.text(setPercent() + '%');
  progressBar.attr({ 値: setValue(), 最大値: setMax() });
  doc.on('スクロール', () => {
    progressLabel.text(setPercent() + '%');
    progressBar.attr({ 値: setValue() });
  });
  win.on('サイズ変更', () => {
    progressLabel.text(setPercent() + '%');
    progressBar.attr({ 値: setValue(), 最大値: setMax() });
  })
});

8. 上級: タイムライン

タイムラインは上記のリストアンカーのアップグレード版であり、年鑑表示、メモ帳、tudo リストなどのアプリケーションで使用できます。

<div id="ラッパー">
  <div id="コンテナ">
    <h1>タイムライン</h1>
    <ol class="タイムライン">
      <li>
        <h2>1997</h2>
        <オル>
          <li>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
            <p>それは、purus vel orci molestie consequat ではありません。</p>
          </li>
          <li>
            <h3>エティアムと弧の速度、コンセクテトゥール アリケット、EU メトゥス</h3>
            <p>Sed vitae diam rhoncus、imperdiet nunc quis、lacinia nulla。</p>
          </li>
        </ol>
      </li>
      <!-- ... -->
      <li>
        <h2>今日</h2>
      </li>
    </ol>
  </div>
</div>

ol.timeline ol、ol.timeline、html、本文 {
  マージン: 0;
  パディング: 0;
}
*、*:前、*:後 {
  ボックスのサイズ: 境界線ボックス;
}
#ラッパー{
  マージン: 0 自動;
  最大幅: 64em;
}
＃容器 {
  フロート: 左;
  パディング: 1em;
  幅: 100%;
}
h1、h2 {
  テキスト配置: 中央;
}
ol.timeline、 ol.timeline ol {
  リストスタイル: なし;
}
ol.timeline>li {
  左パディング: 2px;
  位置: 相対的;
}
ol.timeline>li:before {
  背景色: #a2ed56;
  コンテンツ： "";
  高さ: 100%;
  左: 0;
  位置: 絶対;
  上: 0;
  幅: 2px;
}
@media 画面のみ (最小幅: 40em) {
  ol.timeline>li:before {
    左: 50%;
    変換: translateX(-50%);
  }
}
ol.timeline>li>h2 {
  背景色: #a2ed56;
  色: #1d1f20;
  マージン: 0;
  位置: -webkit-sticky;
  位置: 固定;
  テキスト変換:大文字;
  上: 0;
}
@media 画面のみ (min-width: 40em) {
  ol.timeline>li>h2 {
    境界線の半径: 0.25em;
    マージン: 0 自動;
    下マージン: 1em;
    最大幅: 200px;
  }
}
ol.timeline>li>ol {
  ディスプレイ: フレックス;
  flex-wrap: ラップ;
}
ol.timeline>li>ol>li {
  上境界線: 2px 実線 #a2ed56;
  フレックス: 0 0 100%;
  パディング: 0 0 0.5em 1em;
}
@media 画面のみ (最小幅: 40em) {
  ol.timeline>li>ol>li {
    フレックスベース: 50%;
  }
  ol.timeline>li>ol>li:n番目の子(奇数) {
    左パディング: 0;
    右パディング: 1em;
  }
  ol.timeline>li>ol>li:n番目の子(偶数) {
    上マージン: 2em;
    右パディング: 0;
  }
}
ol.timeline>li>ol>li>h3:最初の子{
  色: #a2ed56;
  下マージン: -0.75em;
}
ol.timeline>li:n番目の子(6n+2):前、
ol.timeline>li:n番目の子(6n+2)>h2 {
  背景色: #83e4e2;
}
ol.timeline>li:n番目の子(6n+2)>ol>li {
  境界線の色: #83e4e2;
}
ol.timeline>li:n番目の子(6n+2)>ol>li h3 {
  色: #83e4e2;
}
ol.timeline>li:n番目の子(6n+3):前、
ol.timeline>li:n番目の子(6n+3)>h2 {
  背景色: #fd6470;
}
ol.timeline>li:n番目の子(6n+3)>ol>li {
  境界線の色: #fd6470;
}
ol.timeline>li:n番目の子(6n+3)>ol>li h3 {
  色: #fd6470;
}
ol.timeline>li:n番目の子(6n+4):前、
ol.timeline>li:n番目の子(6n+4)>h2 {
  背景色: #fca858;
}
ol.timeline>li:n番目の子(6n+4)>ol>li {
  境界線の色: #fca858;
}
ol.timeline>li:n番目の子(6n+4)>ol>li h3 {
  色: #fca858;
}
ol.timeline>li:n番目の子(6n+5):前、
ol.timeline>li:n番目の子(6n+5)>h2 {
  背景色: #fddc32;
}
ol.timeline>li:n番目の子(6n+5)>ol>li {
  境界線の色: #fddc32;
}
ol.timeline>li:n番目の子(6n+5)>ol>li h3 {
  色: #fddc32;
}
ol.timeline>li:n番目の子(6n+6):前、
ol.timeline>li:n番目の子(6n+6)>h2 {
  背景色: #fafafa;
}
ol.timeline>li:n番目の子(6n+6)>ol>li {
  境界線の色: #fafafa;
}
ol.timeline>li:n番目の子(6n+6)>ol>li h3 {
  色: #ファファファ;
}

9. 上級: テキストの積み重ね効果

<p><b>巻物</b>（古フランス語の <i>escroe</i> または <i>escroue</i> に由来）は、<b>ロール</b>としても知られ、文章が書かれたパピルス、羊皮紙、または紙の巻物です。</p>
<h2>構造</h2>
<p>巻物は通常、複数のページに分かれており、パピルスや羊皮紙を貼り合わせたものもあります。
  巻物は端で一緒になっている場合もあれば、筆記具の連続した巻物に印をつけた区分である場合もある。巻物は通常
  一度に1ページずつ開くように広げて、書き込んだり読んだりできるようにし、残りのページは
  見えるページの左右に広げられ、上から下に向かって文章が書かれている。
  ページの下部に。言語によっては、文字は左から右、右から左、または
  方向が交互に変わる（牛耕動物）。</p>
<p>巻物の中には、単にページを巻いたものもあれば、両端に木製のローラーが付いているものもあります。トーラの巻物には、むしろ
  儀式の機能にふさわしい精巧なローラー。</p>
<h2>巻物の使用の歴史</h2>
<p>巻物は、東地中海の古代エジプトで使われていた、編集可能な記録文書の最初の形式でした。
  羊皮紙の巻物は、写本や綴じられた本が登場する以前、イスラエル人の間で使用されていました。
  羊皮紙のページはローマ人によって発明され、紀元1世紀頃に普及しました。巻物はより
  ローマ時代まで、写本よりも重要視されていました。ローマ時代では、写本は通常、単一の緯度列で書かれていました。</p>
<p>巻物を書くのに使われるインクは、巻かれたり広げられたりする表面に付着しなければならなかったので、特別なインクが使われました。
  発達しました。それでも、巻物からインクはゆっくりと剥がれ落ちました。</p>
<h2>ロール</h2>
<p>ロンドンのウェストミンスター宮殿にある議会アーカイブに保管されている英国議会法の記録ロール</p>

html{
  マージン: 0 自動;
  オーバーフロー:自動;
  位置: 相対的;
  テキスト配置: 両端揃え;
  フォントサイズ: 32px;
  背景: #FDFC47;
  背景: -webkit-linear-gradient(右、#24FE41、#FDFC47);
  背景: 線形グラデーション(右、#24FE41、#FDFC47);
}
体 {
  最大幅: 500px;
  高さ: 500px;
  オーバーフロー:自動;
  色: #2D2D2D;
  マージン: 40px 自動;
  背景: #FFFFFF;
}
body::after、*::before、span {
  位置: 固定;
  上: 0em;
  下: 0em;
  空白: ラップなし;
}
p、h2、div {
  表示: インライン;
  フォントサイズ: 1rem;
}
h2::before {
  コンテンツ： "§ ";
}
p::before {
  コンテンツ： "¶ ";
}
h2 {
  色: rgba(255, 100, 100, 1);
}
b、私{
  色: rgba(255, 100, 100, 0.7);
}

[].forEach.call(document.querySelectorAll("p,li,h2,a"), 関数(el) {
  el.innerHTML = el.innerHTML
    。スプリット（" "）
    .map(単語 => `<span>${単語}</span>`)
    。参加する（" "）;
});
// 自動的にスクロールをトリガーする関数 autoscroll() {
  document.scrollingElement.scrollBy({ top: 10, 動作: "スムーズ" });
}
var INTRVL = setInterval(自動スクロール、100);
関数stop() {
  クリア間隔(INTRVL);
}
document.documentElement.addEventListener("マウス移動"、停止);

10. 上級：ジグソー効果

<div class="コンテナ">
  <svg xmlns="http://www.w3.org/2000/svg" バージョン="1.0" 幅="450" 高さ="450">
    <path vector-effect="非スケーリングストローク"
      d="M0,0L150,0 M150,0L149.56893390347997,15.321019590342566C149.13786780695992,30.64203918068513,148.2757356139198,61.28407836137026,140.06938800617533,66.48104320534887C131.86304039843085,71.67800804932747,116.31247737598203,51.42989855659955,106.0863237976504,55.4571772015448C95.86017021931877,59.48445584649006,90.9584260851044,87.78712262910848,98.31560238205316,93.31985483432332C105.67277867900191,98.85258703953816,125.28887540711382,81.6153846673494,135.9460950819655,87.26708643206159C146.60331475681716,92.91878819677378,148.30165737840858,121.45939409838688,149.1508286892043,135.72969704919345L150,150 M150,150L136.2498867270519,151.19262015043395C122.49977345410377,152.3852403008679,94.99954690820755,154.7704806017358,88.63886136501219,149.5799358844125C82.27817582181684,144.38939116708917,97.05703128132234,131.62306143157463,91.89335174152377,123.41848757977095C86.72967220172522,115.21391372796728,61.62345766262259,111.57109575987448,57.41601665267879,118.35387216181743C53.20857564273499,125.13664856376043,69.89990816195004,142.34501933573918,63.81370097469671,149.3569730371089C57.727493787443386,156.36892673847862,28.863746893721693,153.1844633692393,14.431873446860846,151.59223168461963L0,150 M0,150L0,0">
    </パス>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" バージョン="1.0" 幅="450" 高さ="450">
    <path vector-effect="非スケーリングストローク"
      d="M150,0L300,0 M300,0L301.2001963896525,13.663912396847081C302.4003927793049,27.327824793694163,304.8007855586098,54.655649587388325,315.7289704558163,60.746116994185364C326.65715535302274,66.8365844009824,346.11313236813083,51.689694420882326,354.081986768881,55.80894999394135C362.0508411696312,59.92820556700036,358.53257295602356,83.31360669321847,348.48816537765833,86.90520621265637C338.4437577992932,90.49680573209427,321.8732108561706,74.29460364475196,312.70416006576795,81.51143567484586C303.5351092753653,88.72826770493975,301.7675546376827,119.36413385246988,300.88377731884134,134.68206692623494L300,150 M300,150L286.49220155219564,153.40139161409138C272.98440310439133,156.80278322818276,245.96880620878264,163.60556645636552,239.32641647452138,153.94479145535482C232.68402674026015,144.28401645434414,246.41484416734636,118.15968322414001,242.3006348061616,105.81822033151734C238.1864254449769,93.47675743889465,216.22718929552127,94.91816488385344,212.44095852197418,106.97564801958445C208.65472774842706,119.03313115531546,223.0415023507886,141.70668998181873,215.66351015977762,150.64676126035002C208.2855179687667,159.5868325388813,179.14275898438336,154.79341626944066,164.57137949219168,152.39670813472034L150,150 M150,150L149.1508286892043,135.72969704919345C148.30165737840858,121.45939409838688,146.60331475681716,92.91878819677378,135.9460950819655,87.26708643206159C125.28887540711382,81.6153846673494,105.67277867900191,98.85258703953816,98.31560238205316,93.31985483432332C90.9584260851044,87.78712262910848,95.86017021931877,59.48445584649006,106.08632379765042,55.4571772015448C116.31247737598203,51.42989855659955,131.86304039843085,71.67800804932747,140.06938800617533,66.48104320534887C148.2757356139198,61.28407836137026,149.13786780695992,30.64203918068513,149.56893390347997,15.321019590342566L150,0">
    </パス>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" バージョン="1.0" 幅="450" 高さ="450">
    <path vector-effect="非スケーリングストローク"
      d="M300,0L450,0 M450,0L450,150 M450,150L434.583326652323,153.59126987393032C419.166653304646,157.18253974786066,388.33330660929204,164.3650794957213,381.63610015762214,153.82556747666192C374.93889370595224,143.28605545760252,392.3778274979664,115.02449167162312,388.42595723945146,104.84691440262078C384.47408698093653,94.66933713361846,359.1314126718925,102.57574638159319,353.73039928686853,112.35801660812949C348.32938590184455,122.14028683466574,362.8700334408407,133.79841803976356,357.2385770470326,140.3847254348356C351.6071206532245,146.97103282990759,325.8035603266123,148.4855164149538,312.9017801633061,149.2427582074769L300,150 M300,150L300.88377731884134,134.68206692623494C301.7675546376827,119.36413385246988,303.5351092753653,88.72826770493975,312.70416006576795,81.51143567484586C321.8732108561706,74.29460364475196,338.4437577992932,90.49680573209427,348.4881653776584,86.90520621265637C358.53257295602356,83.31360669321847,362.0508411696312,59.92820556700036,354.081986768881,55.80894999394135C346.11313236813083,51.689694420882326,326.65715535302274,66.8365844009824,315.7289704558163,60.746116994185364C304.8007855586098,54.655649587388325,302.4003927793049,27.327824793694163,301.2001963896525,13.663912396847081L300,0">
    </パス>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" バージョン="1.0" 幅="450" 高さ="450">
    <path vector-effect="非スケーリングストローク"
      d="M0,150L14.431873446860846,151.59223168461963C28.863746893721693,153.1844633692393,57.727493787443386,156.36892673847862,63.81370097469671,149.3569730371089C69.89990816195004,142.34501933573918,53.20857564273499,125.13664856376043,57.41601665267879,118.35387216181743C61.62345766262259,111.57109575987448,86.72967220172522,115.21391372796728,91.89335174152377,123.41848757977095C97.05703128132234,131.62306143157463,82.27817582181684,144.38939116708917,88.63886136501219,149.5799358844125C94.99954690820755,154.7704806017358,122.49977345410377,152.3852403008679,136.2498867270519,151.19262015043395L150,150 M150,150L149.973193265246,163.25569656614937C149.94638653049202,176.51139313229874,149.89277306098404,203.02278626459744,139.50106232498663,210.01231400451468C129.10935158898923,217.0018417444319,108.3795435865024,204.4695040919677,102.3265271760971,209.6171452976796C96.27351076569181,214.7647865033915,104.89728594736806,237.59240656727948,117.94077379386776,242.72519670084048C130.98426164036746,247.85798683440154,148.4474621516906,235.29594703763556,154.52728529684987,241.89260926577427C160.60710844200915,248.48927149391307,155.3035542210046,274.24463574695653,152.65177711050228,287.12231787347827L150,300 M150,300L136.41378134453706,301.9978974423072C122.8275626890741,303.99579488461444,95.65512537814818,307.9915897692289,88.57540847915023,298.65161635895845C81.49569158015227,289.3116429486881,94.50869509308224,266.63590124353277,88.34030337850798,258.57873611175137C82.17191166393371,250.52157097997,56.82212472185521,257.0829824215625,54.049391123131464,265.9486942143682C51.27665752440771,274.81440600717383,71.08097726903871,285.9844181511926,65.83558763907592,292.04368584066674C60.590198009113145,298.1029535301409,30.295099004556572,299.05147676507045,15.147549502278286,299.5257383825352L0,300 M0,300L0,150">
    </パス>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" バージョン="1.0" 幅="450" 高さ="450">
    <path vector-effect="非スケーリングストローク"
      d="M150,150L164.57137949219168,152.39670813472034C179.14275898438336,154.79341626944066,208.2855179687667,159.5868325388813,215.66351015977762,150.64676126035002C223.0415023507886,141.70668998181873,208.65472774842706,119.03313115531546,212.44095852197418,106.97564801958445C216.22718929552127,94.91816488385344,238.1864254449769,93.47675743889465,242.30063480616164,105.81822033151734C246.41484416734636,118.15968322414001,232.68402674026015,144.28401645434414,239.32641647452138,153.94479145535482C245.96880620878264,163.60556645636552,272.98440310439133,156.80278322818276,286.49220155219564,153.40139161409138L300,150 M300,150L300.58848922266134,162.76014152121215C301.1769784453226,175.52028304242432,302.3539568906453,201.04056608484862,308.3530463558756,207.02745212005405C314.3521358211059,213.01433815525948,325.17333630624387,199.467827183246,332.782218886124,205.98559997252482C340.39110146600405,212.50337276180366,344.78766614062624,239.0854293123748,337.4179622081037,244.91147931880394C330.04825827558113,250.73752932523306,310.9122857359139,235.80757278752017,302.7149139333725,241.5296584770292C294.5175421308311,247.25174416653817,297.25877106541554,273.6258720832691,298.6293855327078,286.81293604163454L300,300 M300,300L286.8256919800388,302.73826607970113C273.65138396007757,305.4765321594022,247.30276792015522,310.9530643188045,240.96920721709873,302.17538488160477C234.63564651404224,293.3977054444051,248.31714114785163,270.3658144106035,241.5962018751227,261.1615721244882C234.87526260239375,251.95732983837289,207.75188942312647,256.5807362999438,204.08592701851285,267.0803687020843C200.41996461389923,277.5800011042247,220.21141298393937,293.9558594469347,215.10666027662953,300.4218356533489C210.00190756931966,306.88781185976313,180.00095378465983,303.44390592988157,165.0004768923299,301.7219529649408L150,300 M150,300L152.65177711050228,287.12231787347827C155.3035542210046,274.24463574695653,160.60710844200915,248.48927149391307,154.52728529684987,241.89260926577433C148.4474621516906,235.29594703763556,130.98426164036746,247.85798683440154,117.94077379386776,242.72519670084048C104.89728594736806,237.59240656727948,96.27351076569181,214.7647865033915,102.3265271760971,209.61714529767963C108.3795435865024,204.4695040919677,129.10935158898923,217.0018417444319,139.50106232498663,210.01231400451468C149.89277306098404,203.02278626459744,149.94638653049202,176.51139313229874,149.973193265246,163.25569656614937L150,150">
    </パス>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" バージョン="1.0" 幅="450" 高さ="450">
    <path vector-effect="非スケーリングストローク"
      d="M300,150L312.9017801633061,149.2427582074769C325.8035603266123,148.4855164149538,351.6071206532245,146.97103282990759,357.2385770470326,140.3847254348356C362.8700334408407,133.79841803976356,348.32938590184455,122.14028683466574,353.73039928686853,112.35801660812946C359.1314126718925,102.57574638159319,384.47408698093653,94.66933713361846,388.42595723945146,104.84691440262078C392.3778274979664,115.02449167162312,374.93889370595224,143.28605545760252,381.63610015762214,153.82556747666192C388.33330660929204,164.3650794957213,419.166653304646,157.18253974786066,434.583326652323,153.59126987393032L450,150 M450,150L450,300 M450,300L436.82050647459147,299.21288768096537C423.641012949183,298.4257753619307,397.28202589836593,296.8515507238614,390.92947621132134,290.8451437251303C384.57692652427676,284.8387367263992,398.23081420100453,274.4001473670062,392.63858789389707,267.74056355085685C387.0463615867896,261.08097973470757,362.20802129584695,258.20040146180196,358.5637941404978,263.2539734591605C354.9195669851488,268.30754545651894,372.46945296539326,281.29526772414147,366.24117279790926,288.7419638593254C360.01289263042526,296.18865999450935,330.0064463152126,298.09432999725465,315.0032231576063,299.04716499862735L300,300 M300,300L298.6293855327078,286.81293604163454C297.25877106541554,273.6258720832691,294.5175421308311,247.25174416653817,302.7149139333725,241.5296584770292C310.9122857359139,235.80757278752017,330.04825827558113,250.73752932523306,337.4179622081037,244.91147931880394C344.78766614062624,239.0854293123748,340.39110146600405,212.50337276180366,332.7822188861239,205.98559997252485C325.17333630624387,199.467827183246,314.3521358211059,213.01433815525948,308.3530463558756,207.02745212005405C302.3539568906453,201.04056608484862,301.1769784453226,175.52028304242432,300.58848922266134,162.76014152121215L300,150">
    </パス>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" バージョン="1.0" 幅="450" 高さ="450">
    <path vector-effect="非スケーリングストローク"
      d="M0,300L15.147549502278286,299.5257383825352C30.295099004556572,299.05147676507045,60.590198009113145,298.1029535301409,65.83558763907592,292.04368584066674C71.08097726903871,285.9844181511926,51.27665752440771,274.81440600717383,54.049391123131464,265.9486942143682C56.82212472185521,257.0829824215625,82.17191166393371,250.52157097997,88.34030337850798,258.57873611175137C94.50869509308224,266.63590124353277,81.49569158015227,289.3116429486881,88.57540847915023,298.65161635895845C95.65512537814818,307.9915897692289,122.8275626890741,303.99579488461444,136.41378134453706,301.9978974423072L150,300 M150,300L148.83031623124336,315.20269857598424C147.66063246248675,330.40539715196854,145.3212649249735,360.81079430393703,139.0131598522373,366.1263925430023C132.70505477950113,371.4419907820675,122.428212171542,351.6677901082294,114.69272282609364,354.41710430526285C106.95723348064526,357.1664185022962,101.76309739770763,382.4392475702011,109.89880756507118,387.0560695045038C118.03451773243474,391.6728914388066,139.5000741500995,375.6337062395073,148.40524726430448,382.68169346648966C157.31042037850946,389.72968069347206,153.65521018925475,419.864840346736,151.8276050946274,434.932420173368L150,450 M150,450L0,450 M0,450L0,300">
    </パス>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" バージョン="1.0" 幅="450" 高さ="450">
    <path vector-effect="非スケーリングストローク"
      d="M150,300L165.0004768923299,301.7219529649408C180.00095378465983,303.44390592988157,210.00190756931966,306.88781185976313,215.10666027662953,300.4218356533489C220.21141298393937,293.9558594469347,200.41996461389923,277.5800011042247,204.08592701851285,267.0803687020843C207.75188942312647,256.5807362999438,234.87526260239375,251.95732983837289,241.5962018751227,261.1615721244882C248.31714114785163,270.3658144106035,234.63564651404224,293.3977054444051,240.96920721709873,302.17538488160477C247.30276792015522,310.9530643188045,273.65138396007757,305.4765321594022,286.8256919800388,302.73826607970113L300,300 M300,300L300.81935805236554,313.1435162553214C301.63871610473103,326.2870325106428,303.27743220946206,352.5740650212856,312.42784925248606,358.6512204623654C321.57826629551005,364.72837590344517,338.240384276827,350.595654274962,343.55746959332345,356.14998533600493C348.87455490981984,361.7043163970479,342.8466075614958,386.94570014761695,333.8914202613098,392.87903737875376C324.9362329611239,398.8123746098906,313.05380570907613,385.4376653215952,306.9173623402142,391.7398180052308C300.78091897135226,398.0419706888665,300.3904594856761,424.02098534443326,300.1952297428381,437.0104926722167L300,450 M300,450L150,450 M150,450L151.8276050946274,434.932420173368C153.65521018925475,419.864840346736,157.31042037850946,389.72968069347206,148.40524726430448,382.68169346648966C139.5000741500995,375.6337062395073,118.03451773243474,391.6728914388066,109.89880756507118,387.0560695045038C101.76309739770763,382.4392475702011,106.95723348064526,357.1664185022962,114.69272282609363,354.41710430526274C122.428212171542,351.6677901082294,132.70505477950113,371.4419907820675,139.0131598522373,366.1263925430023C145.3212649249735,360.81079430393703,147.66063246248675,330.40539715196854,148.83031623124336,315.20269857598424L150,300">
    </パス>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" バージョン="1.0" 幅="450" 高さ="450">
    <path vector-effect="非スケーリングストローク"
      d="M300,300L315.0032231576063,299.04716499862735C330.0064463152126,298.09432999725465,360.01289263042526,296.18865999450935,366.24117279790926,288.7419638593254C372.46945296539326,281.29526772414147,354.9195669851488,268.30754545651894,358.5637941404978,263.2539734591605C362.20802129584695,258.20040146180196,387.0463615867896,261.08097973470757,392.63858789389707,267.74056355085685C398.23081420100453,274.4001473670062,384.57692652427676,284.8387367263992,390.92947621132134,290.8451437251303C397.28202589836593,296.8515507238614,423.641012949183,298.4257753619307,436.82050647459147,299.21288768096537L450,300 M450,300L450,450 M450,450L300,450 M300,450L300.1952297428381,437.0104926722167C300.3904594856761,424.02098534443326,300.78091897135226,398.0419706888665,306.9173623402142,391.7398180052308C313.05380570907613,385.4376653215952,324.9362329611239,398.8123746098906,333.8914202613098,392.87903737875376C342.8466075614958,386.94570014761695,348.87455490981984,361.7043163970479,343.55746959332345,356.14998533600493C338.240384276827,350.595654274962,321.57826629551005,364.72837590344517,312.42784925248606,358.6512204623654C303.27743220946206,352.5740650212856,301.63871610473103,326.2870325106428,300.81935805236554,313.1435162553214L300,300">
    </パス>
  </svg>
</div>

。容器 {
  幅: 470ピクセル;
  マージン: 40px 自動;
  背景: #FFFFFF;
  高さ: 450px;
  オーバーフロー:自動;
}
svg {
  位置: -webkit-sticky;
  位置: 固定;
  上: 0;
}
パス {
  塗りつぶし: なし;
  ストローク: #2D2D2D;
  ストローク幅: 1.5px;
}

その他の優れた事例

カレンダー: https://codepen.io/dannievinther/details/pGdjPV
段落表示https://codepen.io/burmesepotato/pen/qbbqpnb
スライドカードhttps://codepen.io/kseso/pen/jyewop
滝https://codepen.io/collinsworth/pen/aejgvg
字幕の記事タイトルhttps://codepen.io/coderthegreat/details/abzropg
マウスホイールコントロール要素https://codepen.io/equinusocio/pen/gebxjz
ページレイアウトhttps://codepen.io/havardob/details/gopnpmm
ページレイアウトhttps://codepen.io/ncerminara/pen/vdlpzd