多くのウェブサイトでは、ユーザーが簡単に検索したり他のページに移動したりできるように、上部にナビゲーション バーが固定されています。 同時に、長い文書をユーザーが閲覧しやすくするために、目次が追加されます。段落のタイトルをクリックすると、段落の場所にジャンプします。 図に示すように: アンカーを使用してディレクトリにジャンプすると、固定ナビゲーション バーによってタイトルが隠れてしまうという問題が発生する可能性があります。 1. アンカー位置決め機構 スクロールバーがない場合、アンカーは無効です。 スクロール バーがある場合、スクロール バーは、アドレス ハッシュ (アドレス内の # 記号の後の内容) に対応するアンカー要素の 2. 解決策 例 ソースコードの例 サンプルオンラインプレビュー (1)パディング+マージン パディングはアンカー要素の配置に影響しますが、マージンはアンカー要素の配置には影響しません。そのため、ジャンプ後のアンカー要素の位置を調整するためにパディングが使用され、レイアウトに対するパディングの影響を相殺するためにマージンのために使用されます。 <h3 class="見出し最初" id="最初"> 1. 出現時期と場所が異なる</h3> 。初め { padding-top: 60px;/* 60pxはナビゲーションバーの高さです*/ 上マージン: -60px; } アドバンテージ このソリューションでは追加の要素を追加する必要はなく、CSS を使用して直接問題を解決できます。 欠点 見出しのドキュメント レベルが段落のドキュメント レベルと一致していない場合、他の要素が見えにくくなる可能性があります。 たとえば、タイトルでは (2)アンカー要素としてスパンまたはタグを使用する 置換されないインライン要素の <h3 class="見出し"> <span id="second" class="title_placeholder"> 2. require/exports は実行時に動的にロードされ、import/export は静的にコンパイルされます</span> </h3> .title_placeholder { パディング上部: 60px; } 欠点 解決策(1)と同じ (3)ダークアンカーポイント 配置する必要がある要素の上に、レイアウトに影響を与えない空のアンカー要素を追加します。 ジャンプ後のアンカー ポイントの位置は要素の <div class="dark_anchor" id="third"></div> <h3 class="見出し"> 3. require/exports は値のコピーを出力しますが、import/export モジュールは値への参照を出力します</h3> .ダークアンカー{ 高さ: 60px; 上マージン: -60px; } アドバンテージ 他の要素のマウス選択には影響しません 欠点 このソリューションでは、配置された要素の たとえば、タイトル (配置された要素) には 20 ピクセルの余白があり、アンカー ポイントがジャンプした後も 20 ピクセルの余白は保持されます。アンカー ポイントがジャンプした後、 (4)ターゲット擬似クラス :target CSS 疑似クラスは、ID が現在の URL フラグメントと一致する一意のページ要素 (ターゲット要素) を表します。 4. 一貫性のない使用 :ターゲット{ パディング上部: 60px; 上マージン: -60px; } このソリューションはソリューション(1)と似ています。特定のアンカーポイント(クラス)にジャンプする場合、アンカーポイント要素は 3. 参考文献 URLアンカーHTML位置決め技術の仕組み、応用と問題点 ウェブページの内部アンカーポイントがジャンプしたときに上下のオフセットを実現する純粋なCSS アンカーポイントが固定位置に遭遇すると 上部の固定ナビゲーション バーによって CSS アンカーの配置がブロックされる問題の解決策に関するこの記事はこれで終わりです。上部の固定ナビゲーション バーによって CSS アンカーの配置がブロックされる問題の関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: Docker の NFS-Ganesha イメージを使用して NFS サーバーを構築する詳細なプロセス
目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...
Python は MySQL に接続してデータベース テーブルを変更およびクエリします。 pytho...
1. 問題の紹介ユーザー テーブルに 3 つのフィールドが含まれているシナリオを想定します。 id、...
遭遇した落とし穴私は午後中ずっと、uni-app で scss を使用する際の落とし穴を解決すること...
目次背景表領域の断片化とは何ですか?表領域の断片化を確認する方法表スペースの断片化問題を解決する方法...
目次クラスタクラスターの詳細クラスター内のイベントクラスター内のメソッドクラスター内の属性クラスター...
html ¶ <html></html> html:xml ¶ <ht...
Web ページの制作では、要素の表示と非表示は非常に一般的な要件です。この記事では、要素を表示したり...
目次DockerバージョンCentOS に Docker エンジンをインストールするシステム要件古い...
この記事では、MySQL 8.0.12のインストールチュートリアルを参考までに紹介します。具体的な内...
目次はじめにNginx Dockerファイル新しい会議もっと参考文献はじめに最近、アプリケーションの...
Adobe Brackets は、HTML、CSS、JavaScript 用のオープンソースでシンプ...
mysql クエリ制御ステートメントフィールド重複排除 **キーワード: 明確** 構文: テーブル...
例: nginx ログには、アクセス ログとエラー ログの 2 つの主な種類があります。アクセス ロ...
次の図に示すように: 仮想マシンと Docker を使用するとき、「なぜ Docker は VM よ...