我们在日常浏览网站中，由于网站包含信息量大，例如购物网站中会有许多商品。那么对于这样的情况，往往会有导航栏来帮助我们迅速的找到自己想要的信息。例如图中所示，左侧是商品列表，右侧是商品分类导航栏。


我们现在需要做到的效果是：

1、点击某个商品分类，自动跳转至具体的商品列表。

2、在鼠标滚动浏览商品的同时，根据左侧的商品信息的变化情况，右侧的分类名称会自动标红。表示现在浏览的商品正是该分类下的商品。


实现的基本思路：

1、设置锚点。在导航栏的<a>标签中，设置"href"属性为各个展示商品信息的<div>标签的"id"属性。

2、自动删除/添加样式。当鼠标浏览到某一分类时，自动给右侧导航栏中该分类名称添加一个“当前样式”；当鼠标继续浏览，离开该分类时，自动删除该分类的“当前样式”，并同理给下一个分类添加“当前样式”。


根据思路实现过程：

1、首先创建一些示例的代码：

...
<body>
<divid="menu"><!--商品分类导航栏-->
<ul>
<li><ahref="#one">1F手机</a></li>
<li><ahref="#two">2F电脑</a></li>
<li><ahref="#three">3F家电</a></li>
<li><ahref="#four">4F服饰</a></li>
<li><ahref="#five">5F鞋子</a></li>
</ul>
</div>
<divid="content"><!--商品信息列表-->
<divid="one"class="test">...(具体商品)...</div>
<divid="two"class="test">...(具体商品)...</div>
<divid="three"class="test">...(具体商品)...</div>
<divid="four"class="test">...(具体商品)...</div>
<divid="five"class="test">...(具体商品)...</div>
</div>
</body>
...

以上就完成了该网站的雏形（在此不展示css的制作过程），并且点击<ul>标签中的各个<li>标签都能跳转到相应的<div>标签。


2、设置“当前样式”：

为了简单起见，我们设置一个表示当前商品分类的样式，如下所示：

.current{
background:red;
}

然后给导航栏中的“1F手机”设置一个“当前样式”，默认我们是从头开始浏览网站。接下来需要做的是利用jquery根据商品信息，自动给导航栏中的分类添加“当前样式”。

<script>
$(document).ready(function(){
$(window).scroll(function(){
varscrolltop=$(document).scrollTop();
console.log(scrolltop);//目的是为了在控制台中查看滚动条的高度
varcurrentSorts="";
varcommoditys=$(".test");//所有class为"test"的div
$.each(commoditys,function(){
vardivTop=$(this).offset().top;
console.log(divTop);
if(scrolltop>divTop){
currentSorts="#"+$(this).attr("id");//获取到当前所在的商品分类
}else{
returnfalse;
}
});
//给对应分类设置“当前样式”
varcurrentClass=$("#menu").find('.current');//找到目前样式所在的分类
if(currentSorts&&currentClass.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:属性设置元素的最小高度。


如果以后我还了解到有其他的方法，也会在这写出来，欢迎各位提出建议或问题一起交流。




代码学习参考：《慕课网》，网页导航栏的制作。感谢。