粘性導航欄製作內容跳轉

我有一個粘性導航欄，我使用的是twitter引導程序。當我滑過某個點時，我的粘滯導航欄會顯示，但是當它顯示時，我的內容會跳起來。我想要的是我的內容留在原地而不跳。粘性導航欄製作內容跳轉

我的HTML

<body> 
    <div class="top_menu_wrapper"> 
    <div class="toggle_wrapper"> 
     <ul> 
     <li> 
      <div class="main_menu_header"> 
      <div class="navbar-header"> 
       <button class="navbar-header collapsed move-navtoggle" 
         data-target="#main-menu" data-toggle="collapse" 
         type="button"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 
      </div> 
     </li> 
     </ul> 
    </div> 
    <div id="main-menu" class="collapse navbar-collapse main_menu"> 
     <ul class="nav navbar-nav home-nav"> 
     <li class="nav_item"> 
      <a href="#">About Us</a> 
     </li> 
     <li class="nav_item"> 
      <a href="#">Services</a> 
     </li> 
     <li class="nav_item"> 
      <a href="#">News & Events</a> 
     </li> 
     <li class="nav_item"> 
      <a href="#">Volunteer</a> 
     </li> 
     <li class="nav_item"> 
      <a href="#">Donate</a> 
     </li> 
     <li class="nav_item"> 
      <a href="#">Contact Us</a> 
     </li> 
     </ul> 
     <div class="clearboth"></div> 
    </div> 
    </div> 
    <div class="content"> 
    <p>some content</p> 
    </div> 
</body>

我的JS

$(window).scroll(function() { 
    if ($(window).scrollTop() > 186) { 
     $('.top_menu_wrapper').addClass('navbar-fixed-top').css({ 
      margin: '0 auto', 
      width: '1024px', 
      'border-top': '6px solid #6097dd' 
     }); 
    } else { 
     $('.top_menu_wrapper').removeClass('navbar-fixed-top').css({ 
      width: '100%', 
      'border-top': 'none' 
     }); 
    } 
});

我試圖作出的jsfiddle但我不能夠複製我的錯誤。 JSFIDDLE

來源

2015-04-22 Niks

從.home-nav刪除高度 – aashi

你能解釋一下你的問題嗎，你的帖子不理解！ –

我建議使用引導附加功能。 http://getbootstrap.com/javascript/#affix我認爲這是你需要的。 – yuyokk

只需從.home-nav刪除高度。 .home-nav的高度很小，導航的內容很大。因爲第一個完整的導航顯示，然後高度隱藏與我們聯繫，這個反彈即將到來。導致反彈。

.home-nav { 
    float: right; 
}

來源

2015-04-22 10:40:55 aashi

我的菜單仍然跳躍 – Niks

檢查此更新的小提琴http://jsfiddle.net/cxofn3xg/2/ – aashi

什麼都沒有發生。 – Niks

我設法解決它。我必須在菜單div上放置另一個包裝，並將其高度設置爲與我的菜單相同的高度。它的工作。

來源

2015-04-23 13:23:31 Niks

粘性導航欄製作內容跳轉

回答

相關問題