ページ本文の上部に固定されたグローバルナビゲーションバーでBootstrapを使用しています。
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">MyBrand</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#>Page 1</li>
<li><a href="#>Page 2</li>
<li><a href="#>Page 3</li>
</ul>
</div>
</div>
</div>
</div>
ページコンテンツの上部がナビゲーションバーに重ならないように、本文の上に 40px の余白を追加しました。
body {
background-color: #f5f5f5;
position: relative;
margin-top: 40px;
}
そこまでは、すべて正常に動作します。また、ページ内のナビゲーションを容易にするために、Twitter が Bootstrap ドキュメントの接辞コンポーネントで使用したのと同じメカニズムを使用して、ユーザーがページ内のさまざまなセクションにジャンプできるようにするために、内部アンカーを使用します ( http://を参照)。 twitter.github.com/bootstrap/getting-started.html )
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
[...]
<section id="section1">
[...]
[...]
[...]
</section
<section id="section2">
[...]
[...]
[...]
</section
<section id="section3">
[...]
[...]
[...]
</section>
私の問題は、ユーザーがクリックすると、ブラウザがターゲットを画面の一番上に固定し、コンテンツがナビゲーションバーの下に消えることです。Twitter がトリックを使用していることに気付きました。ターゲット<section>
タグには「padding-top: 30px;」が含まれており、最も近いタグには<h1>
「margin-top: 10px;」が含まれています。テキストを画面上部から正確に 40 ピクセル下に表示するための CSS ディレクティブ。
各セクション間で 40 ピクセルを「失う」ことはできません。ディスプレイをコンパクトに保つ必要があります。私の質問は次のとおりです。内部アンカーが画面ビューの最上部に固執せず、画面の最上部から任意の長さだけ離れたままにする方法はありますか?