最近写了一个新闻页面，要求列表底部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);
})
})
效果就实现啦！
发表评论