html - スティッキーヘッダーカバーアンカーテキスト

Question

ページの残りの部分に浮かぶ粘着性のあるヘッダーがあります。ページアンカーにリンクすると、もちろん、アンカーがページの上部にくるようにスクロールします。ただし、これが発生すると、ヘッダーが下のテキストを覆います。

これを修正する方法はありますか？アンカーはページ上にたくさんあり、それぞれに続くテキストの量が異なるため、アンカーを下に移動することはできません。私の最初は、どういうわけかアンカーの上のある高さまでスクロールすることでした。

ありがとう、デビッド

Answer 1

:target 疑似要素は、探しているものである可能性があります。:target を使用すると、# マークで示されている要素を指定できます。詳細はこちら

Answer 2

私は同じ問題に遭遇し、最終的に次のようなルールを作成しました。

A.named:target {
    display: inline-block;
    height: 120px;
    margin-top: -120px;
}

次に、「名前付き」のクラスを、ブラウザでスクロールさせたい任意のアンカー タグに適用しました。これにより、ブラウザーの上部とアンカーを含む要素の下部の間に 120 ピクセルのスペースが追加されます。ヘッダー用に約 80 ピクセル、リンク先の H2 見出しの高さを補うためにさらに 40 ピクセルが追加されます...そして、負の余白が正の余白を相殺しても、ページの外観には影響しません。

お役に立てれば！