14

同様の投稿がいくつかありました (たとえば、固定ヘッダーを調整するために html アンカーをオフセットする) が、これらの解決策は私の特定のケースでは機能しません。

jQuery を使用して目次を作成しています。具体的には、http: //css-tricks.com/automatic-table-of-contents/で説明されている方法を使用しています。記事内の h2 タグを検索し、アンカー リンクを作成します。

問題は、固定ヘッダーを使用していることです。これらのアンカー リンクの 1 つをクリックすると、ターゲット h2 がヘッダーの下にあります。私が使用している一時的な解決策の1つは次のとおりです。

h2:target{
  padding-top:[header-height];
}

これは、上にスクロールするまで機能し、コンテンツの真ん中に大きなギャップがあります. ヘッダーを考慮してこれらのアンカーリンクをオフセットする方法について、何か考えはありますか? HTML を可能な限りセマンティックに保ちたいと思います。どんな助けでも大歓迎です。

これがまさに私が話していることのjsFiddleです：http://jsfiddle.net/aweber9/GbNFv/

ありがとう。

4

5 に答える 5

8

@Daniel Immsのソリューションは優れていますが、ヘッダーに上部マージンがある場合、この負の上部マージンによってリセットされます。疑似クラスを使用するソリューションを見つけました：

h2:before {
    display: block;
    content: " ";
    height: 20px;  /* Give height of your fixed element */
    margin-top: -20px; /* Give negative margin of your fixed element */
    visibility: hidden;
}

したがって、これは元の上部マージンをリセットしません。

于 2015-07-16T10:26:28.737 に答える
7

良い。私もこの問題を抱えていました。ここで見つけた最善かつ最速の解決策は、Style タグまたは CSS ファイルで次のコード スニペットを使用することです。

html
{
  scroll-padding-top: 12vw; /* height of sticky header */
}
于 2020-11-26T05:45:56.560 に答える
2

両方の答えを組み合わせると、複数のブラウザー間で最も堅牢なソリューションが提供されることがわかりました。CSSに両方を含めます...

a[name]:not([href]) {
    padding-top: 90px;
    margin-top: -90px;
}
a[name]:not([href]):before {
    display: block;
    content: " ";
    padding-top: 90px;
    margin-top: -90px;
    visibility: hidden;
}
于 2016-03-22T02:59:18.040 に答える