1

Twitter Bootstrap を使用していますが、ユーザーがスクロールしたときにナビゲーション バーが一番上にくっつくという問題があります。

ホームページの私の図を見てください。

図: https://i.stack.imgur.com/OKYCA.png
コード: https://i.stack.imgur.com/G3gP6.png

例: https://thomsonreuterseikon.com/ (下にスクロールすると、ナビゲーション バーがページの上部にくっつくことに注意してください)

4

3 に答える 3

0

これまでの返信に感謝しますが、探しているものを正確に実行する独自のソリューションを思いつきましたが、より優れた、またはより効率的なソリューションがあれば、お知らせください。

  1. HTMLコードとページレイアウトについては、元の質問のスクリーンショットを参照してください
  2. 次のスクリプトを使用しました (スクリーンショットを参照): http://s16.postimg.org/abqqs0n51/hhppscript.png

ありがとう

于 2013-07-22T08:57:05.640 に答える
0

あなたのクラス宣言は間違っていると思います。以下の行を変更してみてください。

nav class="navbar navbar-static-top"

に

div class="navbar"

編集：

nav 要素を一元化するには、次の行に「row」を追加します。

div class="container" => div class="container row"

次に、ul タグ クラスを設定して、span12 も含めるようにします。

ul class="nav span12"

nav 要素の位置を設定するには、それらのクラスを span2 に設定し、最初の要素をオフセットします (おそらく offset1 を使用します)。

li class="active span2 offset1"
li class="span2"
li class="span2"

等々。それがうまくいくことを願っています。オフセット/スパンを少しいじる必要があるかもしれませんが、うまくいくはずです。行クラスは、コンテナーの幅を 12 の部分に分割します。5 つの nav 要素があるため、それぞれを span2 に設定すると、1 だけオフセットして中央に配置するのに十分なはずです。

于 2013-07-17T11:25:34.397 に答える
0

または、カスタムでやってみることができます

<div class="nav-collapse">nav nav nav </div>


body {
    height: 3000px;
    top: 0;
    position: relative;
}
.nav-collapse {
    position: relative;
    top: 100px;
    width: 100%;
    background: #CCC;
    height: 100px;
}


$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        $('.nav-collapse').css('top', $(window).scrollTop());
    }
});

http://jsfiddle.net/cc48t/1350/

これはブートストラップ方式ですhttp://prntscr.com/1fx30g

あなたは静的なクラスを持っていて、クラス.navbar-fixed-topが必要です

于 2013-07-17T11:34:57.217 に答える