上部の固定ナビゲーションバーによって CSS アンカーの配置がブロックされる問題の解決方法

多くのウェブサイトでは、ユーザーが簡単に検索したり他のページに移動したりできるように、上部にナビゲーション バーが固定されています。

同時に、長い文書をユーザーが閲覧しやすくするために、目次が追加されます。段落のタイトルをクリックすると、段落の場所にジャンプします。

図に示すように:

アンカーを使用してディレクトリにジャンプすると、固定ナビゲーション バーによってタイトルが隠れてしまうという問題が発生する可能性があります。

1. アンカー位置決め機構

スクロールバーがない場合、アンカーは無効です。

スクロール バーがある場合、スクロール バーは、アドレス ハッシュ (アドレス内の # 記号の後の内容) に対応するアンカー要素のpadding-boxの上端までスクロールします。

2. 解決策

例

ソースコードの例

サンプルオンラインプレビュー

（１）パディング＋マージン

パディングはアンカー要素の配置に影響しますが、マージンはアンカー要素の配置には影響しません。そのため、ジャンプ後のアンカー要素の位置を調整するためにパディングが使用され、レイアウトに対するパディングの影響を相殺するためにマージンのために使用されます。

<h3 class="見出し最初" id="最初">
    1. 出現時期と場所が異なる</h3>

。初め {
    padding-top: 60px;/* 60pxはナビゲーションバーの高さです*/
    上マージン: -60px;
 } 

アドバンテージ

このソリューションでは追加の要素を追加する必要はなく、CSS を使用して直接問題を解決できます。

欠点

見出しのドキュメント レベルが段落のドキュメント レベルと一致していない場合、他の要素が見えにくくなる可能性があります。

たとえば、タイトルではrelative配置を使用してドキュメントの階層を高めます。レイアウトによってブロックされているタイトルの上の段落はマウスで選択できず、ドキュメントをコピーできなくなります。

（２）アンカー要素としてスパンまたはタグを使用する

置換されないインライン要素のpaddingレイアウトには影響しませんが、アンカーの位置には影響する可能性があります。

<h3 class="見出し">
    <span id="second" class="title_placeholder">
    2. require/exports は実行時に動的にロードされ、import/export は静的にコンパイルされます</span>
</h3>

.title_placeholder {
    パディング上部: 60px;
} 

欠点

解決策（1）と同じ

（３）ダークアンカーポイント

配置する必要がある要素の上に、レイアウトに影響を与えない空のアンカー要素を追加します。

ジャンプ後のアンカー ポイントの位置は要素のpadding-boxの上端に配置されることになるため、 heightを設定するとアンカー ポイントの位置に影響し、 margin-topを設定するとレイアウト上の暗いアンカーの影響が相殺されます。

<div class="dark_anchor" id="third"></div>
<h3 class="見出し">
    3. require/exports は値のコピーを出力しますが、import/export モジュールは値への参照を出力します</h3>

.ダークアンカー{
    高さ: 60px;
    上マージン: -60px;
} 

アドバンテージ

他の要素のマウス選択には影響しません

欠点

このソリューションでは、配置された要素のmarginアンカーがジャンプした後の位置に影響するため、タイトルをアンカー要素として直接設定することと矛盾します。

たとえば、タイトル (配置された要素) には 20 ピクセルの余白があり、アンカー ポイントがジャンプした後も 20 ピクセルの余白は保持されます。アンカー ポイントがジャンプした後、 marginの影響を受けずにタイトルを上部に固定したい場合は、このソリューションを慎重に使用してください。

（4）ターゲット擬似クラス

:target CSS 疑似クラスは、ID が現在の URL フラグメントと一致する一意のページ要素 (ターゲット要素) を表します。

4. 一貫性のない使用

:ターゲット{
    パディング上部: 60px;
    上マージン: -60px;
  } 

このソリューションはソリューション（1）と似ています。特定のアンカーポイント（クラス）にジャンプする場合、アンカーポイント要素は:targetスタイルを適用します。

:targetブラウザの互換性:

3. 参考文献

URLアンカーHTML位置決め技術の仕組み、応用と問題点

ウェブページの内部アンカーポイントがジャンプしたときに上下のオフセットを実現する純粋なCSS

アンカーポイントが固定位置に遭遇すると

上部の固定ナビゲーション バーによって CSS アンカーの配置がブロックされる問題の解決策に関するこの記事はこれで終わりです。上部の固定ナビゲーション バーによって CSS アンカーの配置がブロックされる問題の関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。