<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动菜单跟随</title>
</head>
<style>
*{margin:0;padding: 0;}
a{color: #000;}
.header{
position: fixed;
top:0;
left:0;
right: 0;
background: #fff;
}
nav{
1000px;
margin: 0 auto;
height:100px;
line-height:100px;
}
nav li{display: inline-block;padding:0 20px;}
nav li.active a{
color: #22b573;
}
.mode{height:1000px;background: #ccc;}
.content{
margin-top: 100px;
}
</style>
<body>
<div class="header">
<nav>
<ul class="nav nav-tabs">
<li class="page-scroll">
<a href="#w1">wrap 1</a>
</li>
<li class="page-scroll">
<a href="#w2">wrap 2</a>
</li>
<li class="page-scroll">
<a href="#w3">wrap 3</a>
</li>
<li class="page-scroll">
<a href="#w4">wrap 4</a>
</li>
</ul>
</nav>
</div>
<div class="content">
<div id="w1" class="mode">
w1速度快打开的
</div>
<div id="w2" class="mode">
w2速度快打开的
</div>
<div id="w3" class="mode">
w3速度快打开的
</div>
<div id="w4" class="mode">
w4速度快打开的
</div>
</div>
</body>
</html>
<script type="text/javascript" src="https://files.cnblogs.com/files/tonnytong/___jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/tonnytong/_bootstrap.js"></script>
<script type="text/javascript">
$(function(){
var $offset = 0;
$offset = $(".header").height()+12;
$('.page-scroll a').click(function(event) {
var $position = $($(this).attr('href')).offset().top;
$('html, body').stop().animate({
scrollTop: $position - $offset
}, 600);
event.preventDefault();
});
$('body').scrollspy({target: '.header', offset: $offset+2});
});
</script>