置頂?shù)膬?yōu)點(diǎn)

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

2.隨時(shí)提供導(dǎo)航：不是每個(gè)上網(wǎng)的人都很熟悉網(wǎng)站的構(gòu)造、擺設(shè)位置等，那么這個(gè)浮動(dòng)導(dǎo)覽列只要項(xiàng)目設(shè)計(jì)得好，就能讓這位迷途羔羊的網(wǎng)路生手有一個(gè)很好的重點(diǎn)指引。

3.節(jié)省操作：導(dǎo)覽列置頂可以省去按「回到頂端」這個(gè)按鈕，網(wǎng)頁可以少安裝、執(zhí)行一個(gè)區(qū)塊，而且「回到頂端」按鈕有時(shí)會(huì)遮住一些文字。

實(shí)現(xiàn)方法

導(dǎo)航欄下拉至一定高度后固定在頂部的特效。實(shí)現(xiàn)的方法有好多種，這里介紹個(gè)更簡(jiǎn)單易懂的方法。通過jQuery添加移除類來實(shí)現(xiàn)

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

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

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

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

這樣就差不多完成了。

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