提醒：本文最後更新於 759 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

這不是一篇技術文章，所以不深究具體的技術實現。我一直認為只要大家認識到了問題的存在，如何解決它就不是問題。

Affix 是指某元素跟隨頁面滾動的效果，通常當滾動條滾動到一定距離時才觸發。css3 新增的「position: sticky」非常適合用來實現 Affix，但現階段各瀏覽器預設都沒啟用（後面會介紹），所以現在一般用「position: fixed」和 JS 程式碼來實現它。這裡有一個簡單的例子，大家可以先看下，看完我接著介紹這個例子中的兩個問題：

瀏覽器可視高度太小

拖小剛才頁面視窗會發現，當「右邊欄高度 > 瀏覽器可視區域高度」時，處於 fixed 狀態的右邊欄沒辦法完整顯示。針對這個問題，最簡單的策略是「發現高度不夠，不 fixed 右邊欄」。這樣使用者至少能通過滾動頁面來看完右邊欄。個人覺得，如果右邊欄內容不多，大部分使用者不會遇到這種情況時，這樣處理就足夠了，如：

說到這個，我不得不吐槽另外一件事：某網站的浮層都是居中 fixed，某些浮層特別高，在我 1280 * 800 解析度的筆記本上根本顯示不全，每次為了點關閉或者確定按鈕，還得縮小頁面，體驗十分糟糕。

覆蓋頁面底部模組

另外一個問題是，滾動頁面接近底部時，如果「右邊欄高度 > 瀏覽器可視區域高度 - 底部模組高度」，fixed 右邊欄會覆蓋在底部模組之上，不但不美觀，還可能會擋住一些連結。這個問題也非常普遍，如：

（來源頁面）

又一個：

（來源頁面）

我覺得，這個問題要不要修，也取決於網站具體情況。上面兩張圖片是我故意把視窗拖很小截的，正常使用沒問題，修不修無所謂。但如果右邊欄很高，大部分使用者都會遇到這個問題時，那還是建議修一下。最常見的修復策略如下圖所示：

（來源頁面）

position: sticky

這是一個新的 css3 屬性，表現類似 position: relative 和 position: fixed 的合體：目標區域在頁面中可見時，它的行為類似於 position: relative；否則像 position: fixed 一樣跟隨頁面滾動。可以看到，sticky 的行為與用 JS 實現 Affix 的思路是一樣的。

Chrome 23+ 和 Firefox 26+ 都支援這個屬性，不過都需要手動開啟：

• Chrome：進入 chrome://flags，啟用「experimental Web Platform features（實驗性網路平臺功能）」；
• Firefox：進入 about:config，將「layout.css.sticky.enabled」選項值設定為 True；

更新：Chrome 35+ 移除了這個屬性；但 Chrome 56+ 又加回來了。via

它的使用方法很簡單，像下面這樣：

.aside {
    position : sticky; 
    top : 0;
}

這裡有一個使用 position: sticky 實現的 Affix，沒有使用 JavaScript。這個例子依然不完美，但比最初版已經好很多了，遺憾的是考慮到瀏覽器相容性，現在還不能用於實際專案。

最後，發一個使用 JavaScript 解決了本文提到問題的 Affix。程式碼未封裝僅做示意，可以看到要新增的程式碼並不多，但可以顯著提高使用者體驗。類似的場景還有不少，以後再慢慢寫成一個系列。

--EOF--

發表於 2013-11-25 00:36:14 ，並被新增「 使用者體驗 」標籤 ，最後修改於 2016-12-13 00:04:29 。檢視本文 Markdown 版本 »

提醒：本文最後更新於 759 天前，文中所描述的資訊可能已發生改變，請謹慎使用。