<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0px;padding: 0px;}
li{list-style: none;width:200px;height: 30px;}
a{color: #000;text-decoration: none;display: block;width:200px;height: 30px;text-align: center;line-height: 30px;}
.active{background-color:blue; color:#fff;animation:move 1s;}
@-webkit-keyframes move{
from{background-color: #fff;color:#000;}
to{background-color: blue;color:#fff;}
}
.nav{
position: fixed;top: 300px; left: 100px;width: 200px;height: 90px;border: 1px solid #eee;border-radius: 5px;}
</style>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){//
var win=$(window).scrollTop();//获取窗口上边距离文档顶部的距离
var doc=$(document).height();//获取文档高度
var H=$(window).height();//获取窗口的高度
var a=$("#a").offset().top;//获取导航对应内容距离文档顶部的距离
var b=$("#b").offset().top;
var c=$("#c").offset().top;
if(win<=(a+500)){
$(".one").addClass("active").parent().siblings().children().removeClass("active")
}else if(win>=(a+800)&&win<=(b+500)){
$(".two").addClass("active").parent().siblings().children().removeClass("active")
}else if(win>=(b+500)||win==(doc-H)){
$(".three").addClass("active").parent().siblings().children().removeClass("active");
}
})
})
</script>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
<div class="row">
<ul class="nav">
<li ><a href="#a" class="one active">第一部分</a></li>
<li><a href="#b" class="two" >第二部分</a></li>
<li><a href="#c" class="three" >第三部分</a></li>
</ul>
<div class="col-xs-12">
<h2 id="a">联盟</h2>
<p>联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2 id="b">部落</h2>
<p>部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2 id="c">中立</h2>
<p>中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立
中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立
中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立
中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立
中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立
</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号