11

画像とメニューリンクの下でブートストラップメニューを実行しようとしています。スクロールすると、メニューがウィンドウの上部に固定されます。

私は興味深いブートストラップ接辞を見つけて、このスレッドにあるものを使用しました : スムーズに後ろにスクロールするにはどうすればよいですか?

問題は、メニューのボタンを押すと、ページのコンテンツ テキストの下にオプションが表示されることです。

私の問題を見て解決策を試すためのフィドルを書きました： http://jsfiddle.net/mram888/WnPqF/

メニュー div のクラスに異なる z-index を配置しようとしましたが、ページがスクロールされ、メニューが上部に固定されている場合にのみ適切に機能します。

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:2;
}

#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

.nav-wrapper {
    z-index: 2;
}

ここに画像の説明を入力 ここに画像の説明を入力 ここに画像の説明を入力

4

3 に答える 3

9

.nav-wrapperではなくにz-indexを適用する必要があります。#nav

#nav { 
  position: relative;
  z-index: 2; 
}

デモ： http： //jsfiddle.net/t7pL3/

于 2013-01-16T12:56:17.330 に答える
8

別のバリエーション: http://jsfiddle.net/panchroma/6P5sF/

ここでの動作は、以前とは少し異なります。ナビゲーション バーは、固定される前にページと共にスクロールし、折りたたまれたメニューを開くと、ページ コンテンツを押し下げます。

JavaScript を削除し、nav-wrapper div に以下を追加して、 データ属性を使用してすべてを呼び出しました。

<div id="nav-wrapper" data-spy="affix" data-offset-top="100">

data-offset-top は、メニューが固定される前にスクロールする必要がある距離です。

また、CSS に 1 つの小さな変更を加えました。

#nav-wrapper.affix {
  top: 0;
  width: 100%
}

お役に立てれば！

于 2013-01-16T13:46:47.093 に答える
2

これは、提供したCSSを置き換えることで実現できるようです

#nav {
    width: 100%;
    position:fixed;
}

#nav.affix {
    top: 0;
}

#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

主な違いは、ここではケースと#navケースの両方をカバーすることです。#nav.affix#nav.affix-top

この jsfiddleを参照してください。

#nav編集:の位置が継承されたときに問題が発生することが判明しました。私が提案したように修正するか、他の投稿が示唆したようにrelativeに設定すると、問題は解決します。

于 2013-01-16T12:59:27.017 に答える