置頂的優點

1.減少跳出率：如果是從搜尋引擎而來的訪客，對我們網站不熟，文章讀完、資料找到后，沒有個吸引注意力的設計，通常就直接離開了。那么如果浮動導覽列恰巧有個訪客有興趣的主題，就有機會留住這位客人了。

2.隨時提供導航：不是每個上網的人都很熟悉網站的構造、擺設位置等，那么這個浮動導覽列只要項目設計得好，就能讓這位迷途羔羊的網路生手有一個很好的重點指引。

3.節省操作：導覽列置頂可以省去按「回到頂端」這個按鈕，網頁可以少安裝、執行一個區塊，而且「回到頂端」按鈕有時會遮住一些文字。

實現方法

導航欄下拉至一定高度后固定在頂部的特效。實現的方法有好多種，這里介紹個更簡單易懂的方法。通過jQuery添加移除類來實現

注意：dispaly:fixed；會使元素脫離文檔，不占據文檔空間。所以頁面會有一些跳動，這時可以給相鄰元素加上nav所占高度的margin-top或padding-top即可

（1）“導航欄下拉至一定高度后固定在頂部的特效”，也有同學喜歡叫跟隨導航什么的。反正就是這個么意思。先直接上代碼：

將這個js放到要實現效果的頁面里面去，然后我們要修改的是第三行的.nav，“nav“改成你自己頁面導航欄的class；第七行的”100“為下拉到100個像素的時候觸發特效，可以自行修改至合適的高度。

（2）然后在css文件里面增加這個屬性：

這樣就差不多完成了。

講下這個js的意思，判斷下拉到一定高度的時候，給導航欄的div插入一個”fixednav“屬性，然后給”fixednav“加上固定在頂部的參數。