我們?cè)谌粘g覽網(wǎng)站中，由于網(wǎng)站包含信息量大，例如購(gòu)物網(wǎng)站中會(huì)有許多商品。那么對(duì)于這樣的情況，往往會(huì)有導(dǎo)航欄來(lái)幫助我們迅速的找到自己想要的信息。例如圖中所示，左側(cè)是商品列表，右側(cè)是商品分類導(dǎo)航欄。
我們現(xiàn)在需要做到的效果是：
1、點(diǎn)擊某個(gè)商品分類，自動(dòng)跳轉(zhuǎn)至具體的商品列表。
2、在鼠標(biāo)滾動(dòng)瀏覽商品的同時(shí)，根據(jù)左側(cè)的商品信息的變化情況，右側(cè)的分類名稱會(huì)自動(dòng)標(biāo)紅。表示現(xiàn)在瀏覽的商品正是該分類下的商品。
實(shí)現(xiàn)的基本思路：
以上就完成了該網(wǎng)站的雛形（在此不展示css的制作過(guò)程），并且點(diǎn)擊
2、設(shè)置“當(dāng)前樣式”：
為了簡(jiǎn)單起見(jiàn)，我們?cè)O(shè)置一個(gè)表示當(dāng)前商品分類的樣式，如下所示：
重慶分公司
重慶分公司
.current{
background:red;
}
然后給導(dǎo)航欄中的“1F手機(jī)”設(shè)置一個(gè)“當(dāng)前樣式”，默認(rèn)我們是從頭開(kāi)始瀏覽網(wǎng)站。接下來(lái)需要做的是利用jquery根據(jù)商品信息，自動(dòng)給導(dǎo)航欄中的分類添加“當(dāng)前樣式”。
這就已經(jīng)完成了導(dǎo)航欄中分類名跟隨商品變化而變化的效果了，在這里需要解釋一下，這個(gè)效果實(shí)現(xiàn)的關(guān)鍵點(diǎn)在于，怎么樣根據(jù)左側(cè)的div區(qū)域的高度和右側(cè)的滾動(dòng)條的高度去判定在哪一個(gè)分類。
在代碼中我們看到“var scrolltop = $(document).scrollTop();”指的是滾動(dòng)條的高度，如圖：
另外，var divTop = $(this).offset().top;指的是該div距離瀏覽器頂部的高度，如圖：
所以我們可以根據(jù)兩者的高度，來(lái)判斷某個(gè)div區(qū)域是屬于哪個(gè)商品分類，從而對(duì)其分類名稱進(jìn)行樣式的改變。
最后還有一個(gè)小小的問(wèn)題，就是錨點(diǎn)定位偏移的情況。
可能會(huì)出現(xiàn)的是，點(diǎn)擊某一分類，自動(dòng)跳轉(zhuǎn)的并不是對(duì)應(yīng)div的區(qū)域，或是偏移了。參考了網(wǎng)上各位前輩的做法，目前我所知道的是，用兩個(gè)屬性——padding-top和maring-top來(lái)解決偏移問(wèn)題，具體方法如下：
padding-top用于解決錨點(diǎn)區(qū)域與頂部的偏移量
margin-top用于解決錨點(diǎn)區(qū)域與錨點(diǎn)區(qū)域之間因設(shè)置的padding-top而產(chǎn)生的不必要偏移量
padding-top用正值，maring-top用負(fù)值，二者數(shù)值一樣
若發(fā)現(xiàn)最底部的錨點(diǎn)區(qū)域有高度不夠問(wèn)題，則可以給底部錨點(diǎn)區(qū)域設(shè)置一個(gè)min-height解決
min-height:屬性設(shè)置元素的最小高度。
如果以后我還了解到有其他的方法，也會(huì)在這寫(xiě)出來(lái)，歡迎各位提出建議或問(wèn)題一起交流。
代碼學(xué)習(xí)參考：《慕課網(wǎng)》，網(wǎng)頁(yè)導(dǎo)航欄的制作。感謝。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
