Tạo thanh cuộn NavBar ở đầu trình duyệt trong Bootstrap

Question

Tôi mới sử dụng Twitter Bootstrap và muốn có một NavBar ở dưới cùng của MastHead sâu sắc và khi người dùng cuộn dọc trang và NavBar sẽ dẫn đầu của trang, thay đổi kiểu để NavBar trở thành Cố định. Hiệu ứng tôi muốn chỉ bằng http://www.happycog.com/ chỉ bằng Bootstrap NavBar.

Vì vậy, câu hỏi thực sự là cách kích hoạt kiểu thanh điều hướng cố định khi NavBar được cuộn đến vị trí 0 ie: đầu trình duyệt.

Mọi ý tưởng hoặc con trỏ sẽ được đánh giá cao. Cảm ơn bạn.

Answer 1

Bạn sẽ phải sử dụng javascript để thực hiện việc này. Đây là một giải pháp dựa trên jQuery để chuyển đổi định vị thanh điều hướng thành cố định khi nó được đưa lên đầu trang cũng như gắn một div tạm thời vào vị trí của nó để ngăn bố cục thay đổi.

http://jsfiddle.net/T6nZe/

Answer 2

Bạn có thể thử CSS3 vị trí dính:

.sticky { 
    position: sticky; 
    top: 10px; /* When the element reaches top: 10px, it becomes fixed. */ 
    z-index: 100; 
} 

Trình duyệt hỗ trợ: http://caniuse.com/#feat=css-sticky

Answer 3

Trong nhắm đến khả năng tương thích trình duyệt, sau đây có thể được sử dụng nhiều hơn nữa.

.sticky { 
    position: -webkit-sticky; 
    position: -moz-sticky; 
    position: -ms-sticky; 
    position: -o-sticky; 
    position: sticky; 
    top: 10px; 
    z-index: 100; 
} 

Answer 4

Lớp CSS navbar-fixed-top là thứ bạn muốn thêm.

Dưới đây là một ví dụ:

<nav class='navbar navbar-inverse navbar-fixed-top sticky' role='navigation'> 
    <!-- nav content --> 
</nav> 

Answer 5

Tôi tin rằng đây là những gì bạn đang tìm kiếm: http://www.w3schools.com/bootstrap/bootstrap_affix.asp