最近寫了一個新聞頁面，要求列表底部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);

})

})

效果就實現啦！

總結

以上是生活随笔為你收集整理的css 选择一列表菜单,css实现菜单列表随滚动条指定到对应内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。