15

ウェブサイトに固定のナビゲーションバーがあり、ページのさらに下のさまざまなセクションに移動するためのリンクが上部に表示されます。ただし、固定ナビゲーションバーの高さは40ピクセルであるため、すべてのセクションの最初の40ピクセルが覆われています。HTMLまたはCSSを使用して、リンクが移動する場所を40ピクセルオフセットするにはどうすればよいですか？ありがとう。

4

2 に答える 2

14

各セクションの上部から 40 ピクセル上に「ダミー」アンカーを絶対に配置してみてください。これらのアンカーがページの表示方法に影響を与えないように、幅/高さをゼロにし、可視性を非表示にすることができます。ユーザーが固定ナビゲーション バーのリンクの 1 つをクリックすると、ウィンドウはダミー アンカーの上部 (実際のセクションの先頭から 40 ピクセル上) までスクロールします。

HTML の例:

<div class="navbar">
  <a href="#anchor1">Anchor 1</a>
  <a href="#anchor2">Anchor 2</a>
  <a href="#anchor3">Anchor 3</a>
</div>
<div class="section">
  <span id="anchor1" class="anchor"></span>
  Section Content
</div>
<div class="section">
  <span id="anchor2" class="anchor"></span>
  Section Content
</div>
<div class="section">
  <span id="anchor3" class="anchor"></span>
  Section Content
</div>​

CSS の例:

body {
    padding-top: 40px;
}
.navbar {
    position: fixed;
    width: 100%;
    height: 40px;
    top: 0;
    left: 0;
    z-index: 10;
    border-bottom: 1px solid #ccc;
    background: #eee;
}
.section {
    position: relative;
}
.anchor {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    z-index: -1;
    top: -40px;
    left: 0;
    visibility: hidden;
}

実際の例については、http://jsfiddle.net/HV7QL/を参照してください。

編集: CSS3 には、ドキュメント内のリンクの によって参照されている要素、または URL のハッシュ値に:target適用される疑似クラスも含まれています。の上部に 40 ピクセルのパディングを適用できます。これは、ユーザーが固定ナビゲーション バーから選択したセクションにのみ適用されます。idhref:target

CSS の例:

.section:target {
    padding-top: 40px;
}

これは、上記の方法よりも意味的にはクリーンですが、古いブラウザーでは機能しません。

作業例: http://jsfiddle.net/5Ngft/

于 2012-11-25T21:55:47.237 に答える
9

今日、たまたまこの問題に出くわしたので、すでに少し考えていましたが、解決策を見つけたと思います。

ジャンプ先の要素に a を追加padding-top: 40px; margin-top: -40pxします。負のマージンはパディングをキャンセルしますが、ブラウザは依然として要素の上部が実際よりも 40 ピクセル高いと認識します (実際には、要素のコンテンツのみが下から始まるため)。

残念ながら、これはすでに設定されているマージンやパディングと衝突する可能性があり、対象の要素で背景を使用している場合、すべてが台無しになります。

私はそれを回避してjsfiddleを投稿できるかどうかを確認しますが、それまでの間、少なくとも基本的な答えがあります:)

編集：背景の解決策があると思ったのですが、うまくいきませんでした。再び削除されました。

最終編集:ラッピング要素の背景色がわかっている場合、それは一種の作業です。私の例では、テキストの背景は白ですが、タイトルの背景は銀色です。設定した余分なパディングにタイトルの背景が表示されないようにするために、代わりにその前に疑似要素を配置しました。

#three:before { 
    content: " ";
    background: white;
    display: block;
    margin-top: -40px;
    padding-top: 40px;
}

このようにして、余分なパディングの背景が再び白になりますが、これは、必要な背景がわかっている場合にのみ機能します。たとえば、透明に設定すると、記事ではなく、タイトル自体の背景が表示されます。

jsFiddle: http://jsfiddle.net/Lzve6/ 見出し 1 は、問題が発生しているデフォルトの見出しです。見出し 2 は私の最初の解決策で、ほぼすべてのブラウザで動作することが保証されています。見出し 3 は:before疑似要素を使用しており、古いブラウザでは動作しない可能性があります。

于 2012-11-25T21:42:14.483 に答える