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

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

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

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

図に示すように:

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

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

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

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

2. 解決策

ソースコードの例

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

(1)パディング+マージン

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

<h3 class="見出し最初" id="最初">
    1. 出現時期と場所が異なる</h3>
。初め {
    padding-top: 60px;/* 60pxはナビゲーションバーの高さです*/
    上マージン: -60px;
 } 

アドバンテージ

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

欠点

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

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

(2)アンカー要素としてスパンまたはタグを使用する

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

<h3 class="見出し">
    <span id="second" class="title_placeholder">
    2. require/exports は実行時に動的にロードされ、import/export は静的にコンパイルされます</span>
</h3>
.title_placeholder {
    パディング上部: 60px;
} 

欠点

解決策(1)と同じ

(3)ダークアンカーポイント

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

ジャンプ後のアンカー ポイントの位置は要素の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 をよろしくお願いいたします。

<<:  HTML と CSS の命名規則の概要

>>:  Docker の NFS-Ganesha イメージを使用して NFS サーバーを構築する詳細なプロセス

推薦する

React Fragment の紹介と詳しい使い方

目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...

Python MySQL データベース テーブルの変更とクエリ

Python は MySQL に接続してデータベース テーブルを変更およびクエリします。 pytho...

MySQLデータベースは重複データを削除し、メソッドインスタンスを1つだけ保持します

1. 問題の紹介ユーザー テーブルに 3 つのフィールドが含まれているシナリオを想定します。 id、...

uni-app で scss を使用するサンプル コード

遭遇した落とし穴私は午後中ずっと、uni-app で scss を使用する際の落とし穴を解決すること...

MySQL テーブルスペースの断片化の概念と関連する問題の解決策

目次背景表領域の断片化とは何ですか?表領域の断片化を確認する方法表スペースの断片化問題を解決する方法...

Node.js でのクラスター作成に関する簡単な説明

目次クラスタクラスターの詳細クラスター内のイベントクラスター内のメソッドクラスター内の属性クラスター...

CSS 要素を表示および非表示にする 9 つの方法

Web ページの制作では、要素の表示と非表示は非常に一般的な要件です。この記事では、要素を表示したり...

Docker のインストールと構成イメージの高速化の実装

目次DockerバージョンCentOS に Docker エンジンをインストールするシステム要件古い...

MySQL 8.0.12 winx64 詳細なインストールチュートリアル

この記事では、MySQL 8.0.12のインストールチュートリアルを参考までに紹介します。具体的な内...

Docker で nginx のログレベルを調整する方法

目次はじめにNginx Dockerファイル新しい会議もっと参考文献はじめに最近、アプリケーションの...

Adobe Brackets の簡単な使い方のグラフィックチュートリアル

Adobe Brackets は、HTML、CSS、JavaScript 用のオープンソースでシンプ...

MySQLクエリ制御ステートメントの詳細なグラフィック説明

mysql クエリ制御ステートメントフィールド重複排除 **キーワード: 明確** 構文: テーブル...

Nginx アクセス ログとエラー ログ パラメータの説明

例: nginx ログには、アクセス ログとエラー ログの 2 つの主な種類があります。アクセス ロ...

Dockerの動作モードと原理の詳細な説明

次の図に示すように: 仮想マシンと Docker を使用するとき、「なぜ Docker は VM よ...