Bootstrap, tạo một thanh điều hướng dính sau khi cuộn xuống?

Question

Tôi có thanh điều hướng bên dưới hình ảnh tiêu đề. Tôi muốn thanh điều hướng gắn vào đầu trang web khi tôi cuộn xuống. Tôi không thể nghĩ về jQuery hoặc CSS cần thiết, bởi vì thanh điều hướng dường như dính ngay bên dưới hình ảnh tiêu đề để lại một số khoảng trống.

<div class="headerwrap pull-center"> 
<div class="container"> 
    <div id="header" class="row-fluid"> 
     <div class="span5" id="phones"> 
      <img class="phone" src="img/white.png" alt=""> 
     </div> 
     <div class="span7" id="mm-logo"> 
      <img class="mm-log" src="img/logo.png" alt=""> 
     </div> 
    </div> 
</div> 
</div> 


<div class="navbar navbar-inner" id="border-stuff"> 
    <div class="span12"> 

     <!-- .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> 

<!-- Everything you want hidden at 768px or less, place within here --> 
<div class="nav-collapse collapse" id="center-nav"> 
<ul class="nav" > 
    <li><a href="#h1"><h3>Heading1</h3></a></li><li class="divider-vertical"></li> 
    <li><a href="#h2"><h3>Heading2</h3></a></li><li  class="divider-vertical"></li> 
    <li><a href="#h3"><h3>Heading3</h3></a></li><li class="divider-vertical"> </li> 
    <li><a href="#h4"><h3>Heading4</h3></a></li><li class="divider-vertical"></li> 
    <li><a href="#h5"><h3>Heading4</h3></a></li> 
</ul> 
</div> 

</div> 
</div> 

Answer 1

Nếu bạn muốn thanh điều hướng ở cố định ở đầu màn hình chỉ khi hình ảnh tiêu đề đã cuộn đi, bạn có thể sử dụng the bootstrap affix plugin.

Answer 2

Bạn chỉ cần thay thế mã jquery của bạn như thế này:

$('#sidebar').affix({ 
    offset: { 
    top: 50 
    } 
}); 

Và điều chỉnh trên xuống bất cứ điều gì phù hợp nhất.