Bootstrap導航欄在固定在頂部時反覆跳躍

我正在使用模板，導航欄從第一頁的底部開始，當它在腳本之後修復在頂部時有一個奇怪的移動。我正在使用bootstrap。在這裏你可以看到一個視頻的情況：http://i.imgur.com/trrmJj7.gifv Bootstrap導航欄在固定在頂部時反覆跳躍

我試着改變菜單的顏色爲黑色，所以它修復了黑色，但它仍然具有相同的效果。也嘗試在各種瀏覽器。不能修復或者是一個錯誤？

這裏是我的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; }

來源

2016-04-11 Mariana Hernandez

布魯諾上述國家，它與引導

問題

「是啊，現在我明白了。我發現了大量的資源記錄與引導這個問題，但我不知道如何解決 - 布魯諾8分鐘前「

來源

2016-04-11 13:42:04

嘗試增加-webkit-backface-visibility: hidden;到您的導航欄。

#menu nav.navbar { 
    padding: 10px 0px; 
    -webkit-backface-visibility: hidden; 
    border-radius: 0; 
}

來源

2016-04-11 12:49:17

還是同樣的跳躍=（@布魯諾 –

你可以請小提琴嗎？ –

你需要包含處理你的菜單的javascript。 –

Bootstrap導航欄在固定在頂部時反覆跳躍

回答

相關問題