8

読み込み時にページの上部から約 200px で始まるナビゲーション バーがあります。下にスクロールすると、ナビゲーション バーがページの一番上に「固定」され、残りのコンテンツをスクロールするときに表示されるようになります。上から 200px の場所にナビゲーション バーを配置することができます。右に引っ張ったコンテンツは無視され、すべて左に引っ張られます。ナビゲーションバーが表示されたままになり、レイアウト/スタイルがずっと同じであることを確認する必要があります。

以下は、私が問題を抱えていることを示す私のjsfiddleです

  <!-- Begin Logo / Search -->
  <header class="masthead">
      <div class="row">
        <div class="span6">
          <div class="logo pull-left">
              <h1><a href="/">name</a></h1>
          </div>
        </div>
        <div class="span6">
            <div class="pull-right hidden-phone">
                <form class="search" action="/search" id="site-search">
                    <input type="hidden" name="records" value="6">
                    <div class="input-append">
                        <input type="text" name="q" class="search_box" placeholder="Search" value="" autocomplete="off" />
                        <button class="btn" type="submit"><i class="icon-search"></i></button>
                    </div>
                </form>     
            </div>
        </div>
      </div>
  </header>         


  <!-- Begin Navbar -->
  <div>
    <div class="navbar navbar-static">
      <div class="navbar-inner" id="mastnav">
        <div class="container">
            <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                <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>
            <div class="nav-collapse collapse">
                <ul class="nav"><li><a href="#">nav</a> </li></ul>
                <ul class="nav pull-right">
                    <li>
                        <a href="/cart"><i class="icon-shopping-cart"></i> <span id="cart-count">1</span></a>
                    </li>
                </ul>
            </div>      
        </div>
      </div>
    </div><!-- /.navbar -->
  </div>

JSFIDDLE

4

4 に答える 4

11

nav になるaffixと、通常の navbar CSS スタイルには従わなくなります。外側の DIV コンテナーに ID を指定し、これを「接辞」要素として設定できます。CSS を使用して、幅が 100% になるようにします。

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

ワーキングデモ

関連:
affix-bottomに到達して一番上にスクロールした後、Affix Bootstrapがちらつく

于 2013-06-12T11:57:25.390 に答える
2

あなたが望むものを達成する修正されたjsfiddleは次のとおりです。

更新：ごめんなさい！間違った jsfiddle を貼り付けました! 反対票の種をまいたら気づいた！またやって、また更新します

更新：ここにあります：

http://jsfiddle.net/KUPbD/4/

追加の注意として、 と を使用して html で接辞を宣言できるdata-spy="affix"ためdata-offset-top=""、追加のインライン スクリプトは必要ありません。

于 2013-06-12T11:57:11.153 に答える
2 
<script type="text/javascript">
    $(document).ready(function(e) {

        $(window).scroll(function () {
            if ($(window).scrollTop() > $('.navbar').offset().top) {
                $('.navbar').addClass('navbar-fixed-top');
                $('.navbar').removeClass('navbar-static-top');                  
            } else {
                $('.navbar').removeClass('navbar-fixed-top');
                $('.navbar').addClass('navbar-static-top');     
            }
        });         

    });
</script>
于 2014-03-31T11:03:12.387 に答える
-2

navbar の外側のコンテナーに添付ファイルを添付する必要があります。いくつかの変更を加えました...

この Js に変更はありませんが、html 構造:-

$('#mastnav').affix({
      offset: {
        top: 0
      }
   });

デモ:- http://jsfiddle.net/KUPbD/1/

于 2013-06-12T11:59:27.297 に答える