Twitter bootstrap gắn với infinitescroll và window.resize

Question

Từ đọc một vài câu hỏi liên quan đến điều này, tôi nhận thấy rằng không có phương pháp $.affix('refresh') nào có sẵn cho thành phần liên kết khởi động twitter - vấn đề của tôi, mặc dù có liên quan, thậm chí có thể là một bước bổ sung giữa chỉ là một làm mới, hãy để tôi cố gắng giải thích.

Tôi có trang có thanh điều hướng bootstrap chuẩn. dưới đây tôi sẽ gắn một nav phụ mà "ghim" một khi người dùng cuộn qua x-pixel (trong trường hợp của tôi navbar có chiều cao là 41px, tại 41px dấu kết buộc và bằng cách thay đổi lớp .affix thành .affix {top:41px} tất cả là tốt)

Vì vậy, đối với lần kết hợp đầu tiên này, tôi có thể sử dụng thuộc tính chỉ dành cho html. Hơn nữa xuống dưới trang (có thể được coi là "trang thứ hai" về bản chất) Tôi có một phần điều hướng khác cần "gắn" và thay thế tiểu hướng phụ đầu tiên khi người dùng cuộn đến một vị trí nhất định - với điều kiện vị trí của trang thứ hai/liên kết có thể thay đổi do nội dung tôi sử dụng js để tính chiều cao của trang đầu tiên và đặt offset: {top:xxx} dựa trên những gì tôi nhận được.

Điều này cũng hoạt động tuyệt vời/như mong đợi khi người dùng cuộn xuống một chút, lần đầu tiên điều hướng phụ xuất hiện, nếu anh tiếp tục cuộn và tiếp cận tiểu điều hướng thứ hai xuống phía dưới trang nó bắt đầu và thay thế affix'ed sub-nav (nó thực sự không thay thế cho mỗi se mà là các lớp phủ có chỉ số z cao hơn)

Từ đây tôi có hai vấn đề mà tôi không tìm được giải pháp cho:

1. khi người dùng thay đổi kích thước cửa sổ, nội dung của trang đầu tiên trở nên dài hơn, điều này sẽ thay đổi thứ nguyên bù đắp gốc ban đầu của tôi cho dấu xuống trang. Đầu tiên tôi nghĩ rằng một cuộc gọi đơn giản đến .affix('refresh') sẽ/có thể là giải pháp nhưng tất nhiên phương pháp này thậm chí không có sẵn trên thành phần. Tiếp theo, tôi nghĩ tôi chỉ có thể tính lại chiều cao theo cách thủ công và tạo lại $('.my-second-affix').affix({offset: {top:x-new-offset}}); - NHƯNG vì một lý do nào đó dường như không hoạt động chút nào và tôi không thể hiểu tại sao: (

2. vấn đề tiếp theo để giải quyết sau đó là tôi cũng đang sử dụng jquery infinitescroll để tải lên nhiều trang hơn ... mỗi trang có thể có các tiểu hướng khác ở các giai đoạn khác nhau mà tôi muốn gắn và thay thế bao giờ phần cuối cùng bây giờ ở trên cùng .

Note sau đó tôi cũng muốn đảm bảo rằng nếu người dùng cuộn lại theo hướng khác mà gắn liền với trước đây phụ navs sẽ lại đóng themse lves đi ngược (mà tôi nghi ngờ họ sẽ chỉ tốt miễn là offsets đóng là chính xác)

Hy vọng rằng, lời giải thích này là đủ để làm nổi bật vấn đề của tôi và ai đó hoặc đã bị xử lý với điều này trước hoặc có thể cung cấp một số hướng dẫn hướng tới một giải pháp . Tôi đã cố gắng để có bù đắp là một chức năng trả về bù đắp hiện tại từ đầu cũng (như đã đề cập trong một câu hỏi khác Twitter bootstrap change affix offset) nhưng đối với một số lý do mà không hoạt động như mong đợi hoặc.

Bất kỳ trợ giúp nào được đánh giá cao

Answer 1

Bạn đã thử $('#myAffix').affix('checkPosition'). Điều này có sẵn trong Bootstrap3.0

Answer 2

Nếu tôi hiểu chính xác, bạn sẽ cần phải tính toán bù đắp thay đổi kích thước. Ví dụ này được sử dụng jQuery Cái gì như:

$(window).resize(calcOffset); 

    function calcOffset() 
     { 
      var location = $("myElement").offset(); 
      var top = location.top; 
     } 

Answer 3

tôi sẽ khuyên bạn nên sử dụng bù đắp trong các mã tự như <div class="col-md-offset-6"> này. Hy vọng nó hữu ích

Answer 4

Câu hỏi này khá cũ nhưng vì không ai khác đã trả lời câu hỏi này ...

Tôi đã gặp phải sự cố tương tự. Đây là cách tôi giải quyết nó.

$('.affixed-elements').each(function() { 
    var topOffset = 0; //calculate your top offset here 
    var $container = //Set this to the element's container; 
    $(this).affix({ 
     offset: { 
     top: function() { 
      return $container.offset().top - topOffset; 
     }, 
     bottom: function() { 
      return $('body').height() - ($container.offset().top+$container.outerHeight()); 
     } 
     } 
    }); 
}); 

Các cài đặt đó sẽ giữ nguyên tố gắn liền trong đường viền của vùng chứa ngay cả sau khi cửa sổ đổi kích thước.