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

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

2.编写代码

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文件

$(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);

})

})

效果就实现啦！