2016-04-10 17 views
2

テンプレートで作業していて、上に固定するとnavbarが変な動きをします。私はブートストラップを使用しています。 は、ここでは、状況に少しビデオを見ることができます:http://i.imgur.com/trrmJj7.gifv上にナビゲーションバーをスクロールして固定すると、動きの鈍い動きがあります

私はそれが黒にも修正されて黒にメニューの色を変更しようとしたが、それはまだ同じ効果があります。さまざまなブラウザでも試してみました。これを修正するか、バグですか?ここで

は私のHTMLです:

<div id="menu"> 
      <nav class="navbar navbar-default" role="navigation"> 
       <div class="container"> 
        <!-- Brand and toggle get grouped for better mobile display --> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" 
          data-toggle="collapse" data-target="#menu-content"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
          <a class="navbar-brand" href="#"> 
          <img src="img/other/03_Logo.png"> <span>BRAND</span> 
          </a> 
        </div> 

        <!-- Collect the nav links, forms, and other content for toggling --> 
        <div class="collapse navbar-collapse" id="menu-content"> 
         <ul class="nav navbar-nav navbar-right"> 
          <li><a href="#">Home</a></li> 
          <li><a href="#service">Services</a></li> 
          <li><a href="#experience">Profile</a></li> 
          <li><a href="#portfolio">Portfolio</a></li> 
          <li><a href="#testimonial">Testimonials</a></li> 
          <li><a href="#contact">Contact</a></li> 
         </ul> 
        </div><!-- /.navbar-collapse --> 
       </div><!-- /.container-fluid --> 
      </nav> 
     </div> 

とCSS:

#menu { 
    width: 100%; 
    position: absolute; 
    bottom: 0; } 
    #menu nav { 
    border: medium none; 
    background: black; 
    margin-bottom: 0px; } 
    #menu nav.navbar { 
    padding: 10px 0px; 
    border-radius: 0; } 
    #menu nav.navbar.navbar-fixed-top { 
     padding: 5px 0px; } 
#menu nav.navbar-fixed-top { 
    background: black; } 
    #menu .navbar-brand { 
    padding: 15px 0px 0px 15px; } 
    #menu .navbar-brand img { 
     width: 45px; 
     float: left; 
     margin-top: -10px; } 
    #menu .navbar-brand span { 
     float: left; 
     display: block; } 
+0

このナビは底にあります – Manish62

答えて

1

、あなたのCSSからプロパティを削除bottom: 0 ID #menuに与えられました。その後、正常に動作するはずです。

+0

@マリアナ:それは問題を解決しましたか? – Manish62

+0

いいえ、メニューが最下部から始まるため、スクロールすると上部に修正されます。しかし、私はそれを残す必要があると思う、私はそれを解決するように見えることはできません@Manish –

+0

@マリアナ:あなたが下を削除した後:0、それは上部に固定されます – Manish62

関連する問題