ブートストラップアフィックス - jqueryを使用してブーストラップを貼り付けるにはどうすればいいですか？

Question

ここにjsfiddleがあります。https://jsfiddle.net/okiewardoyo/twkthn44/2/
このフィドルは完璧に機能します。 data-offset-topとdata-offset-bottomを使用してブートストラップ貼り付け作業を行います。
私のquenstionは、私のヘッダーと私のフッターが動的であればどうですか？この両方の高さは常に各ページで変更されます。

今のところ、私はアタッチメントに手動高さを使用しています。私のヘッダの高さと、私のフッターの高さをカウントするためにjqueryのを使用する方法、および接辞の仕事をするために、それを実装する方法

data-spy="affix" data-offset-top="100" data-offset-bottom="600" 

？おかげ接辞のため

Answer 1

は私が動的にそれをこのよう

$('#sidebar-affix').affix({ 
     offset: { 
     top: $('.navbar').height(), 
     bottom: function() { 
      return (this.bottom = $('.footer-section').outerHeight(true) + 50) 
     } 
     } 
}); 

************** ************** UPDATE

を設定しますあなたのフィドルこれらの変更を試してみてください

javascriptの

$('#nav1').affix({ 
    offset: { 
     top: $('header').height(), 
     bottom: function() { 
      return (this.bottom = $('footer').outerHeight(true) + 50) 
     } 
    } 
}); 

HTML（data-spy="affix"を除く）を見た後に

<ul id="nav1" class="nav nav-pills nav-stacked"> 
    <li><a href="#">Section One</a></li> 
    <li><a href="#">Section Two</a></li> 
    <li><a href="#">Section Three</a></li> 
</ul> 

CSS

@media (min-width: 979px) { 
    #nav1.affix-bottom { 
     position: relative; 
     margin-top:25px; 
    } 

    #nav1.affix-top { 
     position: static; 
     margin-top:25px; 
    } 

    #nav1.affix { 
     position: fixed; 
     top:25px; 
    } 
} 

#nav1.affix-top{ 
    position:static; 
} 

#nav1.affix-bottom { 
    position: relative 
} 

@mediaは必要ありませんが、あなたのアイデアを得ます。ここで

があなたのfiddle