jQuery导航跟随和滚动到对应文章段落【原创】

页面的head部分先要引入jQuery库和javascript插件，并设置好页面元素的样式，代码如下：

<script type="text/javascript" src="js/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="js/nav.js"></script>  
<style>
	body{font-size:12px; font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; margin:0; padding:0; background:#fff;}
	/*滚动条样式开始*/
	::-webkit-scrollbar{background:#fff;width:6px;height:calc(100% - 40px);border-radius:0 3px 3px 0;}
	::-webkit-scrollbar-track{border-radius:3px;}
	::-webkit-scrollbar-track:hover{background:#eee;border-radius:3px;}
	::-webkit-scrollbar-track-piece{border-radius:3px;}
	::-webkit-scrollbar-track-piece:hover{background:#eee;border-radius:3px;}
	::-webkit-scrollbar-thumb{background:#00a2ff;border-radius:3px;}
	::-webkit-scrollbar-thumb:hover{background:#26c7fc;border-radius:3px;}
	/*滚动条样式结束*/
	ul,li,ol{ list-style:none;}
	div,p,ul,li,ol,dl,h1,h2,h3,h4,h5,img,pre,input{margin:0; padding:0;}
	em,i{font-style:normal;}
	strong{font-weight:normal;}
	img{border:none; vertical-align:middle;}
	.clear{float:none!important; clear:both!important; margin:0; padding:0;}
	a{color:#2C2319;text-decoration:none;}
	.anchor_layer{width: 100%;}
	.anchor_layer .nav_wrap{width: 1200px; height: 45px; background-color: #687888; overflow: hidden; margin: 0 auto; behavior: url(images/pie.htc);}
	.anchor_layer .nav_wrap.navFix{position: fixed; left: 0; top: 0; width: 100%; min-width: 1200px; border-radius: 0; z-index: 9999;}
	.anchor_layer .nav_wrap .wrap_layer{width: 1200px; height: 45px; margin: 0 auto;}
	.anchor_layer .nav_wrap .wrap_tab{width: 120px; height: 45px; float: left;}
	.anchor_layer .nav_wrap a{width: 120px; height: 45px; display: block; color: #fff; line-height: 45px; text-align: center; font-size: 15px; letter-spacing: 2px;} 
	.anchor_layer .nav_wrap .active,.details_main .anchor_layer .nav_wrap a:hover{background-color: #00a2ff; font-weight: bold;}  
	.cont{width: 1200px; margin: 18px auto; height: 800px; background: #f8f8f8;}
	.product-tit{width: 100%; border-bottom: 2px solid #00a2ff; text-align: left; margin-top: 10px; background: #fff; line-height: 32px;}
	.product-tit i{width: 3px; height: 16px; display: inline-block; background: #00a2ff;}
	.product-tit h3{display: inline-block; font-size: 20px; color: #2c2c2c; text-align: left; margin-left: 6px;}
	.product-list{width: calc(100% - 36px); padding: 18px;}
	.product-list p{color: #888; font-size: 18px; text-align: justify; text-indent: 2em; line-height: 38px;}
</style>

页面的body部分设置好对应的容器，代码如下：

<!--开始-->
	<div class="anchor_layer" id="navHeight">
		<div class="nav_wrap" id="nav_wrap"> 
			<div class="wrap_layer">
			  <div class="wrap_tab"><a class="tab active" href="#yaoqiu">要求</a></div>
			  <div class="wrap_tab"><a class="tab" href="#xinnian">信念</a></div>
			  <div class="wrap_tab"><a class="tab" href="#jieshou">接受</a></div>
			  <div class="wrap_tab"><a class="tab" href="#shixian">实现</a></div> 
			</div>
		</div>
	</div>  
    <div class="cont" id="yaoqiu">
		<div class="product-tit">
			<i></i>
			<h3>要求</h3>
		</div>
		<div class="product-list" style="height:600px;">
			<p>第一个阶段，是做出要求，对宇宙发出指令，让宇宙了解你想要些什么，宇宙就会自动回应你的想法。</p>
		</div>
    </div>
    <div class="cont" id="xinnian">
		<div class="product-tit">
			<i></i>
			<h3>信念</h3>
		</div>
		<div class="product-list" style="height:600px;">
			<p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念，就是我的说法，要相信还没有实现的事，“你的愿望就是我的命令”，宇宙就会开始运作安排，从而满足你心中的愿望。</p>
		</div>
    </div>
    <div class="cont" id="jieshou">
		<div class="product-tit">
			<i></i>
			<h3>接受</h3>
		</div>
		<div class="product-list" style="height:600px;">
			<p>第三步，就是这个过程最后一步，接受。开始感觉好极了，想想要是你想要的事物已经出现，那会是什么感觉。</p>
		</div>
    </div>
    <div class="cont" id="shixian">
		<div class="product-tit">
			<i></i>
			<h3>实现</h3>
		</div>
		<div class="product-list" style="height:600px;">
			<p>当你感觉好的时候，你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事，帮助自己具有拥有它们的感觉。无论你能做什么，只要去做，就有助于把这些东西吸引过来。</p>
		</div>
    </div>

底部设置好导航置顶和内容信息锚点的响应，代码如下：

//内容信息导航吸顶
	$(document).ready(function(){ 
	var navHeight= $("#navHeight").offset().top; 
	var navFix=$("#nav_wrap"); 
	$(window).scroll(function(){ 
		if($(this).scrollTop()>navHeight){ 
			navFix.addClass("navFix"); 
		} 
		else{ 
			navFix.removeClass("navFix"); 
		} 
		}) 
	})
//内容信息导航锚点
   $('.nav_wrap').navScroll({
	  mobileDropdown: true,
	  mobileBreakpoint: 768,
	  scrollSpy: true
	});