The CSS Implementation menu list is assigned to the corresponding content with the scroll bar

Recently wrote a news page, asked the list at the bottom of the 5px blue border with the scroll bar changes to the specified content, while the bottom of the list with changes in the border, first show you the effect chart style

2. Write code

<div class= "Page-news-nav" >
<ul class= "News-nav-ul" >
<li class= "News-nav-li" ><a href= "#" class= "News-nav-word nav-word-on" > All news </a></li>
<li class= "News-nav-li" ><a href= "#" class= "News-nav-word" > Dream Consulting </a></li>
<li class= "News-nav-li" ><a href= "#" class= "News-nav-word" > Dream video </a></li>
<li class= "News-nav-li" ><a href= "#" class= "News-nav-word" > Industry news </a></li>
<li class= "News-nav-li" ><a href= "#" class= "News-nav-word" > Pre-Sales issues </a></li>
<li class= "News-nav-li" ><a href= "#" class= "News-nav-word" > Aftermarket issues </a></li>
<li class= "News-nav-li" ><a href= "#" class= "News-nav-word" > Technical Documentation </a></li>
<li class= "News-nav-li" ><a href= "#" class= "News-nav-word" > Construction Station Notice </a></li>
</ul>
</div>

3. Add Style

. 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. Write JS code

Introduction of JQ file <script src= "Js/jquery-1.9.1.min.js" ></script>

<script>
$ (function () {
Gets the distance to the top of the menu bar
var navh=$ (". Page-news-nav"). Offset (). Top;
$ (window). Scroll (function () {
Get the scroll bar slide distance
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>
The effect is achieved!