twitter bootstrap sửa thanh điều hướng sau khi cuộn

Question

Tôi có thanh điều hướng bắt đầu ở khoảng cách 200px so với đầu trang khi tải. Khi tôi cuộn xuống, tôi muốn thanh điều hướng "gắn" chính nó lên đầu trang và hiển thị khi tôi cuộn qua phần còn lại của nội dung. Tôi có thể lấy thanh điều hướng ở vị trí mặc dù cách 200px từ trên cùng và nó bỏ qua nội dung tôi đã kéo sang phải và kéo tất cả sang bên trái. tôi cần phải đảm bảo rằng thanh điều hướng vẫn hiển thị và bố cục/kiểu dáng giống như toàn bộ cách thức thông qua.

dưới đây là jsfiddle của tôi trong đó cho thấy những gì tôi đang gặp rắc rối với

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

Answer 1

Khi điều hướng trở thành affix, nó sẽ không còn theo các kiểu CSS navbar thông thường nữa. Bạn có thể cung cấp một id cho thùng chứa DIV bên ngoài, và sau đó đặt nó thành phần tử `affix '. Sử dụng CSS để đảm bảo CSS luôn ở độ rộng 100%.

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

Working Demo

Answer 2

Đây là jsfiddle sửa đổi mà hoàn thành những gì bạn muốn:

Cập nhật: xin lỗi! dán nhầm jsfiddle! Nhận ra khi tôi gieo bỏ phiếu âm! Tôi sẽ làm điều đó một lần nữa và cập nhật trong một khoảnh khắc

Cập nhật: đây là là:

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

Là một lưu ý thêm, bạn có thể tuyên bố đóng trong html với data-spy="affix" và data-offset-top="", vì vậy không cần thêm một tập lệnh nội tuyến phụ

Answer 3

Bạn cần phải đóng gắn liền với một container ngoài của navbar, tôi đã làm một số thay đổi nó ...

Không có thay đổi về Js này, nhưng cấu trúc html: -

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

Demo: - http://jsfiddle.net/KUPbD/1/

Answer 4

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