Twitterのブートストラップ変更着座オフセット

Question

私は「サブナビゲーション」をしたいサイトを持っています。したがって、セクションにスクロールすると、そのツールバーがメインツールバーの下に貼り付けられます。私はこれを働かせていますが、私は初期化後にトップオフセットを変更することはできません。

affix('refresh')

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

が、私はこれをしようとすると、私が手：：ドキュメントは言う。ここ

Uncaught TypeError: Object # has no method 'refresh'

は私のコードです：

$(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(); 
    }); 
}); 

私は

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

の異なるバリエーションを試してみました

を含む：

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

オフセットを変更することができません。 affixプラグインのオフセットをどのように変更しますか？ありがとう。

Answer 1

私はそれを理解しました。代わりに、動的にオフセットを更新するので、私は、関数にオフセット値を変更：

$(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}}); 
    }); 
}); 

は今、DOMの操作やウィンドウサイズ直しによるセクションの変更、オフセットを自動に起因する機能に変更されたときに変化する値を返します。

Answer 2

私は、より基本的なケースのためにFatmuemooの答えを少し簡略化しました： 私のホームページのナビゲーションバー（デフォルトのブートストラップ#masthead）は、#bgの大きな背景スライダの下に座っています。スライダーの高さは3 cssのブレークポイントによって異なります。 #mastheadのオフセットをスライダの高さに設定します。簡単！

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