bootstrap-affix: Div bên dưới dấu "nhảy" lên đầu. Làm thế nào để làm cho nó trơn tru di chuyển phía sau?

Question

Được chơi với bộ đồ tăng cường trong một vài ngày và ngạc nhiên trước những khả năng mà nó cung cấp.

Đã cố gắng có "tiêu đề" của một số loại, được gắn vào đầu khi người dùng cuộn xuống.

Bạn có thể tìm thấy công việc hiện tại của tôi ở đây: http://mp3dj.free.fr/affix/site/

Tuy nhiên bạn sẽ nhận thấy rằng, khi di chuyển xuống, "POST 1" suddenlty nhảy lên đầu trang. tức là không có cuộn mịn đằng sau như ở đây: http://jsfiddle.net/namuol/Uaa3U/

đang hiện tại:

<div class="container"> 
    <div class="row affix-top" data-spy="affix" data-offset-top="60"> 
    <div class="span12"> 
     <div class="row"> 
     <div class="span3"> 
      <img src="http://www.socialfork.net/public/images/default-profile-photo-female.jpg" class="img-polaroid"> 
     </div> 
     <div class="span9"><h1>Samantha Sam</h1></div> 
    </div> 
    </div> 
</div> 
    <div class="row"> 
    <div class="span12"> 
     <div id="post1" class="box"> 
     <h1>Post 1</h1> 
     <p> Scroll Down↓</p> 
     </div> 
     <div id="post2" class="box"><h1>Post 2</h1></div> 
     <div id="post3" class="box"><h1>Post 3</h1></div> 
    </div> 
    </div> 
</div> 

Bất kỳ giúp đánh giá cao!

Answer 1

Điều gì xảy ra trong mã của bạn là hàng ở trên cùng thay đổi vị trí của nó thành fixed khi độ lệch của nó ở trên cùng nhỏ hơn 60px. Hậu quả là nó dừng lại để tiêu thụ bất kỳ không gian nào trên hàng tiếp theo.

Trong jsfiddle bạn đã giới thiệu có một mã JS bạn nên hiểu và sẽ giúp bạn. Cái này là dành cho bạn:

$('#nav-wrapper').height($("#nav").height()); 

Nó đòi hỏi tiêu đề của bạn phải được đặt bên trong một chưa div (lớp được gọi là nav-wrapper trong fiddle). Mã JQuery ở trên đặt chiều cao của nó dựa trên chiều cao hàng trong khi khởi tạo trang. Chiều cao vẫn giữ nguyên ngay cả khi hàng trên cùng biến mất (cố định).

Một phần của mã JS:

$('#nav').affix({ 
    offset: $('#nav').position() 
}); 

làm cho bạn không phụ thuộc vào kích thước của không gian phía trên dòng đầu tiên, nhưng trong trường hợp của bạn tôi nghĩ rằng bạn không cần nó (bạn có thể dự đoán nó luôn luôn mất 60px).

Answer 2

khi bạn sử dụng giải pháp từ tâm trí Marcin Skórzewski rằng nếu bạn đang sử dụng sự sụp đổ trong thanh điều hướng, nó sẽ ảnh hưởng đến menu thả xuống.

• Chiều cao của thanh điều hướng hoàn chỉnh được đặt bằng cách sử dụng đoạn mã JS nhỏ.
• Khi cửa sổ của bạn nhỏ hơn, thanh điều hướng sẽ được thay thế bằng ||| (sử dụng bootstrap mặc định)
• Khi bạn đang sử dụng trình đơn thả xuống và nhấn ||| để hiển thị menu thả xuống, nó sẽ được đặt phía sau nội dung bên dưới. Nó sẽ không trượt nội dung xuống. Điều này là do chiều cao của thanh điều hướng được đặt.

Giải pháp có thể 1: loại bỏ chiều cao của thanh điều hướng khi bạn nhấp vào ||| và đặt nó trở lại lần nữa khi trình đơn thả xuống quay lại. giải pháp khả thi 2: thêm một margin-top để các phần tử tiếp theo khi navbar dính

update: https://stackoverflow.com/a/15177077/1059884 một giải pháp tuyệt vời sử dụng CSS