[前端學習筆記] Bootstrap - Affix

　最近把 bootstrap 官方的技術文件讀了個遍，大致了解整個 bootstrap 提供的工具有哪些，其中想特別提的是 JavaScript 工具裡的最後一項「Affix」，因為官方文件對於這個工具的說明很簡單，範例也只寫了說頁面右邊的導覽列就是 Affix 的範例，查了一些別人寫的說明才搞清楚是怎麼回事。

　這個工具的功能有兩個，一個是頁面內容捲動時的連結追蹤，這個功能跟前面的 scrollspy 很像，就是由網頁撰寫者用提供 CSS 的定位點，在頁面內容捲動的時候即時更動導覽列的 .active 狀態，讓導覽列標註的 .active 位置跟著捲動的高度走，所以在撰寫的時候只要當作一般的導覽列來寫就好，正確的加上 CSS 定位點跟屬性，應該就沒有問題。

　第二個功能則是導覽列本身顯示的高度位置追蹤，這個就說明得很模糊了。當使用者瀏覽頁面開頭跟結尾的時候，讓導覽列跟著內容移動，而當使用者瀏覽頁面中間的時候，就讓導覽列高度位置鎖在設定好的高度，演算的邏輯是這樣：

1. 把「頁面內容」分成三塊，首先是中間要捲動的主要內容，高於導覽列跟主要內容的部分叫做頁面開頭，低於主要內容（跟導覽列）的部分叫頁面尾端；
2. 利用 Bootstrap 提供的 data-offset-top 跟 data-offset-bottom 屬性把「顯示區域」做出標記；
3. 當使用者捲動到頁面最上方，頁面開頭在瀏覽器顯示區域中顯示的高度高於 data-offset-top，就把 .affix 換成 .affix-top，讓導覽列跟著頁面內容移動；
4. 相反的，當使用者捲到頁面最下方，頁面尾端在瀏覽器顯示區域中顯示的高度高於 data-offset-bottom 設定的高度時，就把 .affix 換成 .affix-bottom，同樣讓導覽謝跟著頁面內容移動。
5. 不過要注意的是 data-offset-top 跟 data-offset-bottom 設定時不要加單位，bootstrap 設定單位直接取 px，如果不想把這兩個屬性設成定值，也可以利用 bootstrap 提供的 JS API 來追蹤這兩個屬性，寫法就像下面這樣：

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

6. 這樣就達成了導覽列在內容中段時鎖定高度的目標。