Twitter thay đổi khởi động bù đắp bù đắp

Question

Tôi có trang web nơi tôi muốn 'điều hướng phụ'. Vì vậy, khi bạn di chuyển đến phần, thanh công cụ của nó sẽ đóng bên dưới thanh công cụ chính. Tôi có điều này làm việc, nhưng tôi không thể thay đổi bù đắp đầu sau khi initailization. Các tài liệu nói:

affix('refresh')

When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:

nhưng khi tôi cố gắng này, tôi nhận được:

Uncaught TypeError: Object # has no method 'refresh'

Đây là mã của tôi:

$(function() { 
    $('.sec-nav').addClass("affix-top"); 
    var adjustNavs = function (first) { 
     $('.sec-nav').each(function(){ 
      var $p = $(this).closest('.sec'); 
      var $$ = $p.prevAll('.sec'); 
      console.log($$); 
      var h = 0; 
      $$.each(function() { h+=$(this).outerHeight();}); 
      console.log(h); 

      if (first) { 
       $(this).affix({offset: {top: h}}); 
      } else { 
       $(this).data('affix', {b: {options: {offset:{top: h}}}}); 
       console.log(this); 
       $(this).affix('refresh') 
      } 

     }); 
    } 
    adjustNavs(true); 
    $('.sec').bind('DOMSubtreeModified', function() { 
     adjustNavs(); 
    }); 
}); 

tôi đã cố gắng biến thể khác nhau của

   $(this).data('affix', {b: {options: {offset:{top: h}}}}); 

bao gồm:

   $(this).affix({offset: {top: h}}); 

Tôi không thể nhận bù đắp thay đổi. Làm thế nào để bạn thay đổi bù đắp của plugin affix? Cảm ơn.

Answer 1

Tôi đã tìm ra. Thay vì tự động cập nhật các bù đắp, tôi đã thay đổi giá trị bù đắp cho một chức năng:

$(function() { 
    $('.sec-nav').addClass("affix-top").each(function(){ 
     var $self = $(this); 
     var offsetFn = function() { 
      var $p = $self.closest('.sec'); 
      var $$ = $p.prevAll('.sec'); 
      var h = 0; 
      $$.each(function() { h+=$(this).outerHeight();}); 
      return h; 
     } 
     $self.affix({offset: {top: offsetFn}}); 
    }); 
}); 

Bây giờ khi một phần thay đổi do thao tác DOM hoặc cửa sổ lại kích thước, bù đắp được automaticly thay đổi do các chức năng trả lại giá trị thay đổi .

Answer 2

Tôi đơn giản hóa câu trả lời của Fatmuemoo một chút cho trường hợp cơ bản hơn: Thanh điều hướng trang chủ của tôi (mặc định bootstrap #masthead) nằm bên dưới thanh trượt nền lớn có id #bg. Chiều cao của thanh trượt thay đổi với 3 điểm ngắt css. Chúng tôi chỉ thiết lập độ lệch của #masthead bằng với chiều cao của thanh trượt. Dễ dàng!

$('header#masthead').affix({ //sticky header at bottom of bg 
     offset: { 
      top: function(){return $("#bg").outerHeight();} 
     } 
    });