上部の固定ナビゲーションバーによって 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 サーバーを構築する詳細なプロセス

推薦する

初心者向けの一般的な Linux システムコマンドの完全なリスト

Linux コマンドの学習は、ほとんどの初心者にとって最大の障害です。今日は、Linux システムで...

Ubuntu 14 に Nginx-RTMP ストリーミング サーバーをインストールするチュートリアル

1. RTMP RTMP ストリーミング プロトコルは、Adobe が開発したリアルタイムのオーディ...

Linux で起動時にプログラムを自動的に実行させる最も簡単な方法

たくさん集めましたが、すべて失敗に終わりました。最終的に、この方法は優れており、使用に影響を与えない...

表 td 画像水平および垂直中央揃えコード

HTMLコード:コードをコピーコードは次のとおりです。 <td align="cen...

USE DB 輻輳に対する MySQL ソリューションの詳細な説明

障害に遭遇すると、障害の根本的な原因を考えるのではなく、障害を解決する方法を考えることがよくあります...

Mysql テーブルで利用可能な最小 ID 値を照会する方法

今日、研究室のプロジェクトを見ていたとき、私にとって「難しい」問題に遭遇しました。実は、それは私があ...

MySql インデックスの詳細な紹介と正しい使用方法

MySql インデックスの詳細な紹介と正しい使用方法1. はじめに:インデックスはクエリ速度に重大な...

Docker Docker の保存場所を変更する コンテナイメージのサイズ制限を変更する操作

これは新しいバージョンではもう不可能なようで、推奨されません。そうでない場合は、ソフト リンクを直接...

花火効果を実現するJavaScript(オブジェクト指向)

この記事では、花火効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具...

JavaScript で円形カルーセルを実装する

この記事では、円形カルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...

Docker Compose のインストールと使用手順

目次1. Docker Compose とは何ですか? 2. Docker Composeのインスト...

Linuxのwhichコマンドの具体的な使い方

Linux でファイルを見つけたいのに、その場所がわからないことがよくあります。次のコマンドを使用し...

jsを使用して簡単な抽選機能を実現する

この記事では、参考までに、簡単な抽選機能を実装するためのjsの具体的なコードを共有します。具体的な内...

PrometheusとGrafanaを使用したMySQLサーバーのパフォーマンス監視の詳細な説明

概要Prometheus は、HTTP プロトコルを介してリモート マシンからデータを収集し、ローカ...

JavaScript の高度なプログラミングの基本参照型

目次1. 日付2. 正規表現3. オリジナルパッケージタイプ序文:参照値(オブジェクト)は、 Dat...