1     <divclass="About_nav">
 2     <divclass="tab1">
 3     <ul>
 4     <liclass="slt"><imgclass="sanjiao"style="bottom:0; left:78px;"src="data:images/sanjiao.png"/><astyle="background-position:18px-26px;">公司简介</a></li>
 5     <li><imgclass="sanjiao"style="bottom:0; left:261px;"src="data:images/sanjiao.png"/><astyle="background-position:-32px0;">发展历程</a></li>
 6     <li><imgclass="sanjiao"style="bottom:0; left:444px;"src="data:images/sanjiao.png"/><astyle="background-position:-136px0;">团队风采</a></li>
 7     <li><imgclass="sanjiao"style="bottom:0; left:627px;"src="data:images/sanjiao.png"/><astyle="background-position:-80px0;">领导关怀</a></li>
 8     </ul>
 9     </div>
10     </div>

 1     $(window).scroll(function(){
 2     About_main.each(function(i){
 3     //将对应区域距离页面头部的距离 保存到一个变量中
 4     var sss =($(this).offset().top)-200,
 5     //滚动条已滚动的距离
 6     winST = $(window).scrollTop(),
 7     //判断当前页面是否处于某个区域中
 8     inArea = sss < winST && winST <(sss + $(this).height());
 9     if(inArea){
10     //移除所有高亮class
11     $(".tab1 li.slt").removeClass("slt")
12     //将所有指示牌图标改为为红色背景
13     $(".tab1 li a").position_y(0)
14     //将区域对应的指示牌图标变为白色背景 并且添加高亮class
15     $(".tab1 li").eq(i).addClass("slt").find("a").position_y(-26)
16     }
17     })
18     })

 1     $.fn.extend({
 2     position_x:function(x){
 3     var _this = $(this)
 4     _this.each(function(){
 5     var y = $(this).css("background-position").split('px')[1]
 6     $(this).css("background-position", x +"px"+ y +"px")
 7     })
 8     return _this
 9     },
10     position_y:function(y){
11     var _this = $(this)
12     _this.each(function(){
13     var x = $(this).css("background-position").split('px')[0]
14     $(this).css("background-position", x +"px "+ y +"px")
15     })
16     return _this
17     }
18     })

1     $(".tab1 li").click(function(){
2     var index = $(this).index()
3     $('body,html').animate({ scrollTop: top_Arr[index].offset().top -100},800);
4     })