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