描述完整個問題後，
發現太冗長了，
於是在開頭加個簡單版XD
==== 簡單版問題描述 ====
有一個網頁，
選單固定置頂不受頁面捲動影響。
若使用者習慣用鍵盤空白鍵捲動網頁內容，
則十個網頁有八個會發生：
每次捲動，
開頭的幾行內容會被選單擋住。
==== 超冗長問題描述 ====
現在的網頁設計很流行選單置頂釘住，
這樣一來使用者往下捲動頁面，
想要選單功能時，
就不用再捲回頁面頂端了。
立意良好，
但衍生出一個問題，
嚴重影響到使用者(或我個人)的瀏覽習慣。
我看過使用這種設計概念的網站，
十個有八個都有這個問題，
那就是有些人習慣「按空白鍵捲動頁面」。
這跟選單置頂釘住有什麼關係呢?
以下來說明一下技術細節。
網頁中每一個區塊都可以有無限長的內容，
因此每個區塊都會出現所謂的「捲軸」，
如果一個有捲軸的區塊裡頭還有一個有捲軸的區塊，
雖然網頁瀏覽器知道捲動的邏輯，
不過對一個使用者來說，
可能會搞不清楚我現在往下捲，
到底是在捲哪個區塊了。
於是出現了一種設計理念：
透過巧妙設計安排，
讓整個網頁僅有一個捲軸，
那就是網頁本身。
這之中「巧妙設計安排」就變成了重要的課題，
一個網頁要顯示的內容那麼多，
該怎麼排版才能看起來美觀又「舒適」。
一切看起來很有學問的進行著，
直到新的設計需求被加進來：
選單固定在最上面，
不受捲動影響。
然後新的問題產生出來了。
(雖然包括我自己製作的網頁也經常忽略這問題)
想想用滑鼠進行捲動是怎麼回事。
我看了幾行字，
然後滾動滑鼠滾輪，
讓頁面往下捲動幾行，
然後我接著往下看。
然後想想用「鍵盤空白鍵」進行捲動是怎麼回事。
我看完目前頁面所呈現的所有行，
然後按下「空白鍵」，
讓頁面往下捲動「一整個呈現區域」，
然後後接著往下看。
解釋完滑鼠跟鍵盤對於「往下捲動」的不同之後，
要再深入說明選單置頂造成了什麼。
為了兼顧「選單置頂」和「頁面只有一個捲軸」，
大部分的網頁工程師 (包含我在內) 會採用的作法，
把選單變成浮動的，
永遠黏在置頂位置。
由於選單變成浮動了，
內容會填補選單的空缺，
自動往上靠攏，
結果反而讓內容的一部分被選單遮住了。
於是，
再設定讓內容往下空出選單高度的單位。
舉例來說，
選單高度有 100px，
所以故意讓內容的開頭保留 100px 的行高，
一切就解決了。
對習慣滑鼠捲動的人來說，
是沒問題了，
但請回憶一下我們稍早提到的鍵盤空白鍵捲動，
捲動一整頁意味著目前看到的最後一行，
會捲到下次看到的第一行之上，
也就是看不到那行了。
那麼下次看到的第一行，
會出現在頁面的「最頂端」。
然而最頂端被浮動的選單擋住了。
換句話說，
用空白鍵捲動的使用者，
每次都會被擋住幾行。
他們必須「再」多按幾次方向上鍵，
讓頁面往下回捲幾行，
才看得到被擋住的部分。
==== 反省與心得 ====
其實身為 UI 人員，
碰到這種類似情境的機率大概就像吃飯喝水那麼頻繁吧。
有時候我們會想，
簡簡單單的秀些文字，
到底有什麼專業可言，
然而事實上「美觀又舒適」是一個動態且模糊的定義，
有時兩者甚至具有衝突。
我想設計考驗的並不是一種技術的比拼，
很會寫程式、很會畫畫充其量就是持有參賽資格而已。
設計是一種發想、一種揣模、一種說服、
一種能讓人體驗深刻的超能力吧。
