网页定位导航特效

　　一般购物网站都会有在侧边的定位导航条，方便用户操作。今天就学习如何制作定位导航条。

　　一般的代码思路是：分析--设计--实现；

　　第一步：分析      效果是要达到点击侧边的导航选项，页面会调到对应的位置上。  这个可以用ID  目标锚来完成，把a标签的href值指定为ID值；

　　　　　　　　　　并且随着鼠标滑动，菜单栏会随之变动。　  　用鼠标滑动事件scroll事件监听，找到当前页面的ID值   通过id值在菜单栏中找出对应的选项，添加高亮的class。

　　第二步：设计      如何确定当前页的ID   　　 这样可以确定当前页。

                              在菜单栏中去除默认的current类，为当前页对应的菜单栏加上current类。

　　第三步：实现　　

<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var items = $("#content").find(".item");
var menu = $("#menu");
var top = $(document).scrollTop();
var currentId = "";
items.each(function(){
var m = $(this);
if (top > m.offset().top-200) {                    //减200是为了符合用户习惯，下面的页面大部分显示的时候就可以算作当前页了。
currentId = "#" + m.attr("id");　　　　　　//得到当前页ID
} else{
return false;
}
});
var currentLink = menu.find(".current");
if (currentId && currentLink.attr("href") != currentId) {                     //currentId定义是空的，如果上面那个判断没有任何值的话，
currentLink.removeClass("current");　　　　　　　　　　　　　　　　　//currentId还是空，意味着当前页面还是在第一页上，current类不用更改
menu.find("[href="+currentId+"]").addClass("current");
}
});
});
</script>

            

 

　　

　　

来源：https://www.cnblogs.com/jiancheng/p/6148836.html