擇要：導航是Web網站中的最主要元素之一，但其正在計劃上存正在不容易應用的題目。置頂導航可加快網站的導航速率，提速約22%。可經由過程CSS戰JavaScript(或JQuery)技巧去真現。但其也存正在必定缺陷，好比對挪動裝備的兼容性，計劃的范圍性等。
SirsiDynix公司UX/UI計劃師Hyrum Denney正在Smashing Magazine上揭櫫瞭一篇文章《Sticky Menus Are Quicker To Navigate》，分享瞭本身對置頂菜單舉行的可用性研討結果，及真現技巧戰相幹挑釁。CSDN對該文舉行瞭編譯，內容以下：
導航是Web網站中最主要的元素之一，年夜部門計劃師皆贊成那一面。隻管如斯，如今的導航其實不老是輕易應用。平日，用戶必需轉動到網站的頂部能力拜訪導航菜單。比來，我正在研討置頂菜單是不是能夠加快網站的導航。對此我舉行瞭可用性研討。上面將展現本次研討的結果，和一些真現的技巧及相幹的挑釁。
圖1
置頂導航的界說
置頂(或牢固)導航是被鎖定正在網站某地位的菜單，當用戶轉動頁裡時，該導航其實不會消逝，換句話道，用戶能夠正在網站的任何處所拜訪該導航，而不消轉動頁裡。固然置頂導航能夠運用到任何菜單中，好比頁足、交際媒體按鈕，但一樣平常重要用於網站的導航上。圖2展現瞭挪動裝備上尺度導航取置頂導航的分歧的地方。
圖2
可用性研討
研討配景
為瞭本次研討，我專門創立瞭兩個險些完整一樣的測試網站。獨一的分歧面是一個具有尺度導航，另外一個是置頂導航。正在第一個網站中，請求四十個介入者限時完成5個義務。然後再到另外一個網站上往完成別的分歧的5個義務。那兩個網站均正在桌裡電腦長進止測試，曲到末瞭才會告知用戶兩網站之間的分歧。正在測試完整停止後，經由過程對數據的剖析，我得出兩個風趣的結論。
1.置頂菜單可以使導航快22%
研討數據表現，介入者沒必要將頁裡轉動到頂部，便可以快速天找到他們所須要的內容。22%看起去大概其實不是一個年夜數據，但對拜訪者卻有很年夜的影響。依據該數據，置頂導航能夠贊助拜訪者每5分鐘勤儉36秒。固然，假如您正加強用戶體驗，讓用戶正在頁裡中逗留更少的時光隻是個中的一個利益。應當讓用戶深刻摸索該網站，沒有受任何限定天找到所須要的器械。
2.100%的介入者更愛好置頂菜單，但沒有曉得愛好的緣故原由
正在測試的末瞭階段，我都邑問用戶是不是留意到兩個網站的分歧之下。但出人能道得出。變更很渺小，出人留意到它，由於他們皆正在專註於完成相互的義務。當訊問介入者感到哪一個網站更輕易應用。40位介入者均以為有置頂導航的網站更輕易應用(應用更快速)。許多人批評道：我沒有曉得那兩個網站有甚麼分歧的地方，但我感到經由過程面擊置頂導航能夠節儉更多的時光。如斯批評表現出用戶對置頂導航的盡對支撐。
桌裡硬件的置頂導航
設想一下，您正正在Word中輸進一個文檔，每當您念減細一個單詞，或減寬頁邊距，皆必需轉動到第一頁舉行設置。是否是一念起去，便讓人懊喪啊。不管您正正在做甚麼，年夜部門桌裡硬件都邑時候供給一個完全的導航菜單供您拜訪。Web閱讀器也應當如許，假如我們必需轉動到網站的頂部能力拜訪閱讀器的地點欄，那便太好笑瞭。
優良案例分享
比來，Facebook戰Google+也采取瞭置頂導航。正在好國拜訪量最下的25傢網站中，如今隻要16%采取瞭置頂導航。上面枚舉出一些正在那圓裡做得很棒的網站。
Fizzy Software
那是程度置頂導航中一個很好的例子，位於頂部。當應用該網站時，用戶會感到很舒暢。
圖3
Web Appers
該網站的導航是垂曲的，位於左邊，取Google+的導航有面類似。它獨一的缺陷是，假如屏幕的下度低於560像素，那末菜單上面的部門便沒法拜訪瞭，我正在上彀本上測試該網站時發明瞭那個題目。
圖4
MakeBetterApps
MakeBetterApps那是另外一個出色的例子。導航稍微通明，它上面的內容模糊可睹，那是一個很沒有錯的測驗考試。
圖5
Rodolphe Celestin
Rodolphe Celestin該網站的置頂導航高出網站的頂部，但當您背下轉動頁裡時，導航的計劃便會產生渺小變更。隻要堅持好同等性，如斯簡化該計劃是一個很好的技能。同時，該網站的計劃者借采取瞭當下正風行的計劃辦法：全部網站隻要一個頁裡，導航上的鏈接是一個個錨面，面擊後能夠跳到頁裡的響應地位。那些皆使該網站應用起去很舒暢。
圖6
Ryan Scherf
Ryan Scherf該網站的導航是垂曲的，上裡隻要圖標。該立異使人印象深入。
圖7
Web Designer Wall
Web Designer Wall該網站的垂曲置頂導航後果很好，由於菜單隻正在4個菜單項。它很實用於專客。
圖8
固然置頂菜單其實不是最風行的導航情勢，但愈來愈多的網站正正在應用。
如今便開端計劃
幸免應用iFrame
iFrame好像是真現置頂導航的間接辦法，但要幸免應用它。由於iFrame會致使許多題目，特別是跨閱讀器兼容性題目、平安題目、搜刮引擎劣化題目。iFrame有它的用武之天，但不該成為HTML結構中的重要部門。
CSS
用CSS去真現置頂導航是一個沒有錯的辦法。它也是最間接、最沉量、最快速的辦法。有三面須要留意： position、margin-top戰z-index。將菜單的position設置為fixed，菜單將沒法追隨頁裡的其他部門轉動。假如導航是程度偏向的，能夠不消設置margin屬性。末瞭，正在程度導航上，應用z-index屬性包管導航初末居於其他元素的上裡。當您轉動頁裡時，其他內容將正在導航下滑動。
念懂得更多內容請睹W3C網站。
JQuery戰JavaScript
圖9：那個簡略且精致的置頂導航條由JavaScrpt真現
假如您更愛好jQuery、JavaScript，您能夠嘗嘗上面的辦法：
● jScroll
● Simple Smart Sticky Navigation Bar
● jQuery Waypoints
● Sticky MenuBar
置頂導航的缺陷
圖10
計劃范圍性
采取置頂導航大概須要廢棄一些計劃挑選，而那些大概是團隊不肯廢棄的。比方，程度置頂導航位於頁裡的頂部，其他元素的上裡。固然它很輕易真現，但紛歧定是用戶所須要的。
輕易專心，遭到打攪
一沒有當心，垂曲導航便會讓用戶專心。正在用戶轉動頁裡時，一些置頂元素大概會湧現耽誤;其他元素大概太下(或太寬)，而影響對內容的拜訪。導航應當輕易拜訪，同時不該掠奪內容的留意力。
對挪動裝備的兼容性
上文提到的CSS戰JavaScript真現辦法，正在某些挪動裝備閱讀器上其實不供給支撐。Luke Wroblewski的文章《Organizing Mobile》分享瞭正在挪動裝備上創立導航須要重面留意的多項本則。相應式計劃技巧也為基於屏幕尺寸調劑導航供給瞭一些辦理計劃。
要懂得各個裝備對它的支撐情形。提早懂得那些兼容性題目，能夠勤儉更多時光。《When Can I Use?》文章中先容瞭桌裡戰挪動閱讀器對CSS屬性position:fixed的支撐情形。Brad Frost也對此做瞭測試戰剖析，正在他的視頻中也供給瞭出色的不雅面。
結論
做為計劃者、開辟者，我們為何要賡續迫應用戶高低轉動頁裡去探求導航呢?那正在桌裡硬件上已沒有是題目，而且我們有一些數據能夠表現置頂菜單的好處。正在好國，拜訪量最下的25傢網站中有84%能夠經由過程置頂導航，去加快對用戶的導航。
固然，置頂導航其實不實用於任何情形，特別正在資本松俏時。應用置頂導航需賣力斟酌，並包管網站的可用性戰團體用戶體驗。
做者簡介：
Hyrum Denney，專註於Web計劃戰開辟。現就任於SirsiDynix，擔負UX/UI計劃師。曾開辦本身的UX事情室，同時正在電子商務止業擔負收集運營主管。熱中於進修新常識，對用戶體驗計劃、用戶應用網站的生理教有著特別的興致喜好。
本文鏈接：Sticky Menus Are Quicker To Navigate