A锚点实现，滚动页面内容改变tab选项

Css:

ul{margin:0;padding:0;list-style:none;}
a{
text-decoration: none;
outline:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-outline-style:none;
color:#333;
}
.left{
width:200px;
background-color:#eee;
padding:20px 0;
box-sizing:border-box;
float:left;
position:fixed;
}

.left ul li{height:50px;line-height:50px;}
.left ul li a{padding:0 10px;display:block;}
.left ul li a:hover{background-color:#eabfd3;color:#fff;}
.left ul li.ac{
background-color:#eabfd3;
}
.left ul li.ac a{color:#fff;}
.right{width:1000px;background-color:#eee;margin-left:220px;border:#ccc solid 1px;}
.right div{height:500px;color:#fff;margin-bottom:20px;background-color:#eabfd3;}
.foot{height:350px;}

Html:

<div class="left">

<ul class='_cf'>

<li class='ac'><a href='#a1'>通用</a></li>

<li><a href='#a2'>汽车</a></li>

<li><a href='#a3'>厨具</a></li>

<li><a href='#a4'>餐饮</a></li>

<li><a href='#a5'>新闻</a></li>

<li><a href='#a6'>微博</a></li>

</ul>

</div>

<div class="right">

<div id="a1">

a1

</div>

<div id="a2">

a2

</div>

<div id="a3">

a3

</div>

<div id="a4">

a4

</div>

<div id="a5">

a5

</div>

<div id="a6">

a6

</div>

</div>

<div class="foot">

Js部分

<script>

window.onscroll=function(){

var top=$(document).scrollTop();

// alert(top);

if(top>0 && top<=500){

$('ul li').removeClass('ac');

$('ul li').eq(0).addClass('ac');

}

if(top>400 && top<900){

$('ul li').removeClass('ac');

$('ul li').eq(1).addClass('ac');

}

if(top>900 && top<1300){

$('ul li').removeClass('ac');

$('ul li').eq(2).addClass('ac');

}

if(top>1300 && top<1800){

$('ul li').removeClass('ac');

$('ul li').eq(3).addClass('ac');

}

if(top>1800 && top<2200){

$('ul li').removeClass('ac');

$('ul li').eq(4).addClass('ac');

}

if(top>2200){

$('ul li').removeClass('ac');

$('ul li').eq(5).addClass('ac');

}

}

</script>

原谅老夫的少女心~~~~~~~~~~