我們在日常瀏覽網站中，由於網站包含信息量大，例如購物網站中會有許多商品。那麼對於這樣的情況，往往會有導航欄來幫助我們迅速的找到自己想要的信息。例如圖中所示，左側是商品列表，右側是商品分類導航欄。
我們現在需要做到的效果是：
1、點擊某個商品分類，自動跳轉至具體的商品列表。
2、在鼠標滾動瀏覽商品的同時，根據左側的商品信息的變化情況，右側的分類名稱會自動標紅。表示現在瀏覽的商品正是該分類下的商品。
實現的基本思路：
1、設置錨點。在導航欄的<a>標籤中，設置"href"屬性爲各個展示商品信息的<div>標籤的"id"屬性。
2、自動刪除/添加樣式。當鼠標瀏覽到某一分類時，自動給右側導航欄中該分類名稱添加一個“當前樣式”；當鼠標繼續瀏覽，離開該分類時，自動刪除該分類的“當前樣式”，並同理給下一個分類添加“當前樣式”。
根據思路實現過程：
1、首先創建一些示例的代碼：
...
<body>
<div id="menu"> <!--商品分類導航欄-->
<ul>
<li><a href="#one">1F手機</a></li>
<li><a href="#two">2F電腦</a></li>
<li><a href="#three">3F家電</a></li>
<li><a href="#four">4F服飾</a></li>
<li><a href="#five">5F鞋子</a></li>
</ul>
</div>
<div id="content"> <!--商品信息列表-->
<div id="one" class="test">...(具體商品)...</div>
<div id="two" class="test">...(具體商品)...</div>
<div id="three" class="test">...(具體商品)...</div>
<div id="four" class="test">...(具體商品)...</div>
<div id="five" class="test">...(具體商品)...</div>
</div>
</body>
...
以上就完成了該網站的雛形（在此不展示css的製作過程），並且點擊<ul>標籤中的各個<li>標籤都能跳轉到相應的<div>標籤。
2、設置“當前樣式”：
爲了簡單起見，我們設置一個表示當前商品分類的樣式，如下所示：
.current{
background:red;
}
然後給導航欄中的“1F手機”設置一個“當前樣式”，默認我們是從頭開始瀏覽網站。接下來需要做的是利用jquery根據商品信息，自動給導航欄中的分類添加“當前樣式”。
<script>
$(document).ready(function() {
$(window).scroll(function(){
var scrolltop = $(document).scrollTop();
console.log(scrolltop ); //目的是爲了在控制檯中查看滾動條的高度
var currentSorts= "";
var commoditys = $(".test"); //所有class爲"test"的div
$.each(commoditys ,function() {
var divTop = $(this).offset().top;
console.log(divTop );
if (scrolltop >divTop ) {
currentSorts= "#" + $(this).attr("id");//獲取到當前所在的商品分類
}else{
return false;
}
});
//給對應分類設置“當前樣式”
var currentClass = $("#menu").find('.current'); //找到目前樣式所在的分類
if (currentSorts&¤tClass .attr("href")!=currentSorts) {
//判定條件：currentSorts是否爲空 && 當前樣式所在的分類的id是否等於currentSorts
currentClass .removeClass("current");
$("#menu").find("[href="+currentSorts+"]").addClass("current");
}
});
});
</script>
這就已經完成了導航欄中分類名跟隨商品變化而變化的效果了，在這裏需要解釋一下，這個效果實現的關鍵點在於，怎麼樣根據左側的div區域的高度和右側的滾動條的高度去判定在哪一個分類。
在代碼中我們看到“var scrolltop = $(document).scrollTop();”指的是滾動條的高度，如圖：
另外，var divTop = $(this).offset().top;指的是該div距離瀏覽器頂部的高度，如圖：
所以我們可以根據兩者的高度，來判斷某個div區域是屬於哪個商品分類，從而對其分類名稱進行樣式的改變。
最後還有一個小小的問題，就是錨點定位偏移的情況。
可能會出現的是，點擊某一分類，自動跳轉的並不是對應div的區域，或是偏移了。參考了網上各位前輩的做法，目前我所知道的是，用兩個屬性——padding-top和maring-top來解決偏移問題，具體方法如下：
padding-top用於解決錨點區域與頂部的偏移量
margin-top用於解決錨點區域與錨點區域之間因設置的padding-top而產生的不必要偏移量
padding-top用正值，maring-top用負值，二者數值一樣
若發現最底部的錨點區域有高度不夠問題，則可以給底部錨點區域設置一個min-height解決
min-height:屬性設置元素的最小高度。
如果以後我還瞭解到有其他的方法，也會在這寫出來，歡迎各位提出建議或問題一起交流。
代碼學習參考：《慕課網》，網頁導航欄的製作。感謝。