jq实现导航条根据滚动条高度聚焦，点击导航锚点到对应内容，垂直滚动聚焦导航，导航自动聚焦

先上代码，解释留到最后

html

<!--start 文章内容-->
	<div class="artical-contanner" style="width: 500px; margin: 0 auto;padding: 20px;">
		<!--模块1-->
		<div class="box article1">
			<div class="title">CSS</div>
			<div class="art" style="height: 500px;background-color: #0000FF;">
				此处很多内容..........
			</div>
		</div>
		<!--模块2-->
		<div class="box article1">
			<div class="title">javascript</div>
			<div class="art" style="height: 800px; background-color: #0064CF;">
				此处很多内容..........
			</div>
		</div>
		<!--模块3-->
		<div class="box article1">
			<div class="title">html</div>
			<div class="art" style="height: 1000px; background-color: #ccc;">
				此处很多内容..........
			</div>
		</div>
		<!--模块4-->
		<div class="box article1">
			<div class="title">jQuery</div>
			<div class="art" style="height: 1000px; background-color: #c9b8d7;">
				此处很多内容..........
			</div>
		</div>
		<!--模块5-->
		<div class="box article1">
			<div class="title">nodejs</div>
			<div class="art" style="height: 1000px; background-color: #c6e2bc;">
				此处很多内容..........
			</div>
		</div>
		<!--模块6-->
		<div class="box article1">
			<div class="title">vue</div>
			<div class="art" style="height: 1000px; background-color: #A2B1C1;">
				此处很多内容..........
			</div>
		</div>
		
		...
	</div>
	<!--end 文章内容-->
	
	<!--start 右侧导航-->
		<ul class="right-nav">
			<li class="item active">CSS</li>
			<li class="item">javascript</li>
			<li class="item">html</li>
			<li class="item">jQuery</li>
			<li class="item">nodejs</li>
			<li class="item">Vue</li>
		</ul>
	<!--end 右侧导航-->

 css

/*start 文章内容*/
   		.title{
   			font-size: 26px;
   			font-weight: bold;
   			border-bottom: 1px solid #ccc;
   			margin-bottom: 20px;
   			padding-bottom: 20px;
   		}
   		.box{
   			padding: 20px;
   			border: 1px solid #ccc;
   			border-radius: 2px;
   			margin-bottom: 20px;
   		}
   		.art{
   			padding: 20px;
   		}
   		body{
   			transition: all ease 1s;
   		}
   		/*end 文章内容*/
   		/*start 右侧导航*/
   		ul,li{
   			list-style: none;
   		}
   		.right-nav{
   			position: fixed;
   			width: 100px;
   			top: 50%;
   			right: 10px;
   			border: 1px solid #ccc;
   			border-radius: 6px;
   			padding: 2px;
   			transform: translate(0,-50%);
   			background-color: rgba(225,225,216,.8);
   		}
   		.right-nav .item{
   			height: 50px;
   			line-height: 50px;
   			text-align: center;
   			font-size: 16px;
   			border-bottom: 1px solid #ccc;
   			border-radius: 2px;
   			-webkit-user-select: none;
   		}
   		.right-nav .item:hover{
   			cursor: pointer;
   			background-color: #ccc;
   		}
   		.right-nav .item:last-child{
   			border-bottom: none;
   		}
   		.right-nav .item.active{
   			background-color: #6b6b6b;
   			color: #fff;
   		}
   		/*end 右侧导航*/

jq、javascript

$(window).scroll(function(e){
			setNavActive()
		})
		
		var titleArr = $('.title');
		//聚焦
		function setNavActive(){
			if(isClick) return ''; 
			var stop = $(document).scrollTop();
			for(var i = titleArr.length - 1; i >= 0; i--){
				if($(titleArr[i]).offset().top - $(window).height()/2 <= stop){
					$('.right-nav .item').eq(i).addClass('active').siblings().removeClass('active');
					break;
				}
			}
		}
		
		var isClick = false,
		timer = 0;
		//锚点
		$('.right-nav .item').click(function(){
			isClick = true;
			clearTimeout(timer);
			var index = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$("body, html").stop().animate({
                scrollTop: $('.title').eq(index).offset().top - 40
            });
            timer = setTimeout(function(){
            	isClick = false;
            },1000)
		});

原理

这里的功能细分的话有两部分，一部分是随滚动条的移动右侧导航自动聚焦。二是点击右侧导航条滚动条滚动到对应内容。

首先要获取所有对应内容距离页面顶部的距离，通过遍历（注意是逆序遍历），通过逆序遍历每次和滚动条顶部距离对比，如果小于滚动条距离的此时给右侧导航对应选项聚焦、移除其他聚焦同时跳出遍历即可。

至于点击导航条让滚动条滚动到对应内容则更简单，如果把对应内容和导航条选项都看做一个数组的话，那么两个数组的元素个数是一一对应的。只要获取点击导航元素的下标，再让滚动条滚动到对应内容的页面高度即可。