精選文章

[前端學習筆記] 雜記 2017-07-12

[前端學習筆記] Bootstrap - Affix

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

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

 第二個功能則是導覽列本身顯示的高度位置追蹤,這個就說明得很模糊了。當使用者瀏覽頁面開頭跟結尾的時候,讓導覽列跟著內容移動,而當使用者瀏覽頁面中間的時候,就讓導覽列高度位置鎖在設定好的高度,演算的邏輯是這樣:
  1. 把「頁面內容」分成三塊,首先是中間要捲動的主要內容,高於導覽列跟主要內容的部分叫做頁面開頭,低於主要內容(跟導覽列)的部分叫頁面尾端
  2. 利用 Bootstrap 提供的 data-offset-topdata-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))
    }
  }
})
  1. 這樣就達成了導覽列在內容中段時鎖定高度的目標。