12

ページ本文の上部に固定されたグローバルナビゲーションバーで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 ピクセルを「失う」ことはできません。ディスプレイをコンパクトに保つ​​必要があります。私の質問は次のとおりです。内部アンカーが画面ビューの最上部に固執せず、画面の最上部から任意の長さだけ離れたままにする方法はありますか?

4

3 に答える 3

15

最後に、この問題を簡単に解決する方法を見つけました。

body {
    background-color: #f5f5f5;
    position: relative;
    margin-top: 40px;
}

section {
    padding-top:40px;
    margin-top:-40px;
}

これは、本文の上に 40px のマージンが追加され、セクションの上に 40px のパディングが追加され、それぞれの予想される位置を上に移動するために負の 40px のマージンも追加され、ブラウザは、アンカーがクリックされた後に表示をセクションに描画します。

この助けを願っています。

于 2013-01-28T14:00:58.243 に答える
5

正しい位置にスクロールし、ページをスクロールするときに選択したメニュー項目を正しくするにpadding-top: 40px;は、アンカーに設定し、アンカーmargin-bottom: -40px;の前の兄弟に設定する必要があります。

これは、ナビゲーション メニューから要素を見つけてスタイルの変更を適用する JS スニペットを使用して実現できます。

$("header .nav a[href!=#]").each(function(){
    $($(this).attr("href")).css("padding-top", "40px").prev().css("margin-bottom", "-40px");
});
于 2013-06-16T05:24:34.347 に答える
2

アプリケーションが JavaScript を適用できる場合は、次の JavaScript も適切に機能します。

function maybeScrollToHash() {
    if (window.location.hash && $(window.location.hash).length) {
        var newTop = $(window.location.hash).offset().top - $('.navbar-fixed-top').height() + parseInt($('body').css('padding-top'),10);
        $(window).scrollTop(newTop);
    }
}

$(window).bind('hashchange', function() {
maybeScrollToHash();
});

maybeScrollToHash();

ここにある回答を少し修正したものです: https://github.com/twbs/bootstrap/issues/193

唯一の違いは、上記のコードがnavbar-fixed-topクラスで機能することです。

于 2015-07-08T09:28:16.523 に答える