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>
原谅老夫的少女心~~~~~~~~~~