黄舟2017-04-11 13:24:04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
$(".evt_link").click(function(){
$(this).addClass("active");
$(this).siblings(".evt_link").removeClass("active");
});
var mk=$(".mk");
var kk=0;
$(window).scroll(function(){
kk = document.documentElement.scrollTop || document.body.scrollTop;
for(var i =0;i<mk.length;i++){
if(kk>mk.eq(i).offset().top){
$(".evt_link").removeClass('active');
$(".evt_link").eq(i).addClass('active');
}
}
});
});
</script>
<style type="text/css" media="screen">
.mk{height:500px;width:980px;border:1px solid #999;margin:auto;}
.evt_nav_right{position:fixed;top:100px;left:20px;width:100px;}
.evt_nav_right a{display:inline-block;width:100px;}
.active{font-weight:bold;color:blue}
</style>
</head>
<body>
<p class="evt_nav_right" style="visibility: visible;">
<a href="#test01" class="evt_link" title="test01">test01</a>
<a href="#test02" class="evt_link" title="test02">test02</a>
<a href="#test03" class="evt_link" title="test03">test03</a>
<a href="#test04" class="evt_link" title="test04">test04</a>
<a href="#test05" class="evt_link" title="test05">test05</a>
</p>
<p class="mk" id="test01">test01</p>
<p class="mk" id="test02">test02</p>
<p class="mk" id="test03">test03</p>
<p class="mk" id="test04">test04</p>
<p class="mk" id="test05">test05</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html> 这应该就是你想要的效果
