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

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

2.编写代码

3.添加样式

.page-news-nav{
width: 100%;

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{

margin: 0 auto;
}
.page-news-nav ul li {
float: left;


}
.page-news-nav .news-nav-word{
display: block;


font-size: 14px;
color: #000;
text-align: center;
line-
cursor: pointer;
text-decoration: none;
}
.page-news-nav .nav-word-on{

border-bottom: 5px solid #00a0ea;
}

4.编写js代码

引入jq文件
 

效果就实现啦！