css实现菜单列表随滚动条指定到对应内容

最近写了一个新闻页面，要求列表底部5px的蓝色边框随滚动条的变化对应到指定的内容，同时列表下边框也随着变化，先给大家看下效果图样式

2.编写代码

<div class="page-news-nav">
<ul class="news-nav-ul">
<li class="news-nav-li "><a href="#" class="news-nav-word nav-word-on">所有新闻</a></li>
<li class="news-nav-li "><a href="#" class="news-nav-word">中梦咨询</a></li>
<li class="news-nav-li "><a href="#" class="news-nav-word">中梦视频</a></li>
<li class="news-nav-li"><a href="#" class="news-nav-word">行业新闻</a></li>
<li class="news-nav-li "><a href="#" class="news-nav-word">售前问题</a></li>
<li class="news-nav-li "><a href="#" class="news-nav-word">售后问题</a></li>
<li class="news-nav-li "><a href="#" class="news-nav-word">技术文档</a></li>
<li class="news-nav-li "><a href="#" class="news-nav-word">建站须知</a></li>
</ul>
</div>

3.添加样式

.page-news-nav{
width: 100%;
height: 87px;
background: #fff;
box-shadow: 0 3px 5px rgba(193,193,193,1);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#c1c1c1', Direction=135, Strength=5,);/*for ie6,7,8*/
-moz-box-shadow:0 3px 5px rgba(193,193,193,1);/*firefox*/
-webkit-box-shadow:0 3px 5px rgba(193,193,193,1);/*webkit*/
}
.news-nav-ul{
width: 1000px;
margin: 0 auto;
}
.page-news-nav ul li {
float: left;
width:125px;
height: 87px;
}
.page-news-nav .news-nav-word{
display: block;
width: 81px;
height: 87px;
font-size: 14px;
color: #000;
text-align: center;
line-height: 87px;
cursor: pointer;
text-decoration: none;
}
.page-news-nav .nav-word-on{
height: 82px;
border-bottom: 5px solid #00a0ea;
}

4.编写js代码

引入jq文件<script src="js/jquery-1.9.1.min.js"></script>
 
<script>
$(function(){
// 获取菜单栏到顶部的距离
var navH=$(".page-news-nav").offset().top;
$(window).scroll(function(){
// 获取滚动条滑动距离
var scroH=document.body.scrollTop;
if(scroH>=navH+10){
$(".page-news-nav").css({"position":"fixed","top":"0","z-index":"9999"});
}else{
$(".page-news-nav").css({"position":"static"}) ;
}
 
if(scroH>=0 && scroH<300){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-one").addClass("nav-word-on");
}else if(scroH>=300 && scroH<700){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-two").addClass("nav-word-on");
}else if(scroH>=700 && scroH<1300){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-three").addClass("nav-word-on");
}else if(scroH>=1300 && scroH<1800){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-four").addClass("nav-word-on");
}else if(scroH>=1800 && scroH<2500){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-five").addClass("nav-word-on");
}else if(scroH>=2500 && scroH<3100){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-six").addClass("nav-word-on");
}else if(scroH>=3100 && scroH<3700){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-seven").addClass("nav-word-on");
}else if(scroH>=3700 && scroH<4000){
$(".news-nav-word").removeClass("nav-word-on");
$(".nav-li-eight").addClass("nav-word-on");
}
})
$(".nav-li-one").click(function(){
$('body,html').animate({scrollTop:0},500);
})
$(".nav-li-two").click(function(){
$('body,html').animate({scrollTop:472},500);
})
$(".nav-li-three").click(function(){
$('body,html').animate({scrollTop:1000},500);
})
$(".nav-li-four").click(function(){
 
$('body,html').animate({scrollTop:1600},500);
})
$(".nav-li-five").click(function(){
 
$('body,html').animate({scrollTop:2200},500);
})
$(".nav-li-six").click(function(){
 
$('body,html').animate({scrollTop:2800},500);
})
$(".nav-li-seven").click(function(){
 
$('body,html').animate({scrollTop:3400},500);
})
$(".nav-li-eight").click(function(){
 
$('body,html').animate({scrollTop:4000},500);
})
})
</script>
效果就实现啦！