5

コンピューターでテストしている長いページを作成しました。長いので、冒頭に目次を追加しました。目次の下には、クリックするとページの特定のセクションに移動するためのリンクがいくつかあります。使用したマークアップの例を次に示します。

<h4>Table of Contents</h4>
<ul>
    <li><a href="#gotolink">Link</a></li>  
</ul>
<h3><a name="gotolink">Link</a></h3>
    <p>some stuff here</p>

それは正常に動作します。問題は、ページのどこにいてもヘッダーが常に表示されるように、ヘッダーも固定されていることです。目次の下のリンクをクリックすると、ページのそのセクションに移動しますが、ヘッダーものをカバーすることになり<h3>ます。リンクをクリックするとページのそのセクションに移動するようにしたいのですが、セクションは画面の上部ではなく中央にあるため、ヘッダーは何もカバーしません。

4

3 に答える 3

1

解決

position: relative;これを行うには、ターゲット<a>要素を設定します。ヘッダーに設定された高さを指定し、に設定するだけtop: -[header height]です<a>。

デモンストレーション

これがJSFiddleです。長いページの上部にあるをクリックしLinkます（膨大な量のLorum Ipsumを許してください）。ページが赤いタイトルにジャンプします。

CSS

body {
    margin-top: 20px;    /* Same height as header */
}

#header {
    position: fixed;
    background: black;
    color: white;
    height: 20px;
    line-height: 20px;
    width: 100%;
    top: 0;
}

h3 a {
    position: relative;
    top: -20px;    /* Negative header height */

    /* Don't select anchor */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

警告

  • オフセットを正しく設定できるように、ヘッダーには明示的な高さが必要です。
  • <a>は含まれている要素（この場合）からオフセットされているため、<h3>ユーザーの選択は。で無効になりuser-select: noneます。これは、内のテキストを<a>選択できないことを意味します。<h3>これが、JSFiddleデモでのテキストをラップしなかった理由です。
  • これにより、ターゲットタイトルは画面の中央に配置されませんが、ヘッダーの下に配置されます。
于 2013-01-20T16:31:23.017 に答える
0

ページの名前付きセクションにタグ付けするアンカー タグがクリックされたときに、x ピクセル数だけ下にスクロールして静的ヘッダーを補う JavaScript を追加することをお勧めします。

于 2013-01-20T16:12:57.993 に答える
0

たぶん、次のようなことを試してみてください：

...
    <a name="link"></a><br /><br /><br /><br /><br />  
    <h3>Your Heading Here</h3>
    <p>some stuff here</p>
于 2013-01-20T16:14:22.980 に答える