gistfile1.html

<div class="visible_area">
	<nav class="page_nav">
		<ul>
			<li><a href="#ac1"></a></li>
		</ul>
	</nav>
	<article id="ac1">
		<h2></h2>
	</article>
</div>
<script>
var pn = $('.page_nav'),
  	scroller = function(){
		var top = $(document).scrollTop(),
			vac = $('.visible_area'),
			vat = vac.offset().top;
			vah = vac.height(),
			vaa = $('article',vac),
			pos = [[vac[0], +vat]];
		$.each(vaa, function(i){pos.push($(vaa[i]).offset().top);});

		$(window).on('scroll', function(){
			var i = d = 0;top = $(document).scrollTop();
			while(i < vaa.length){
				var tot = $(vaa[i]).offset().top - 100, is = tot > top;
				if(is){
					d = i;i = 90;
					$('li',pn).removeClass('active');$('li:nth-child('+d+')',pn).addClass('active');
				}else{i++;}
			}
			if(top >= vat && top <= (vat+vah)){pn.addClass('fixed');}else{pn.removeClass('fixed');}
		});
	}
scroller();

$('.page_nav a').on('click',function(e){
	e.preventDefault();
	var id = $(this).attr('href'),
		target = $(id),
		ttop = target.offset().top;
	$('html, body').animate({scrollTop: ttop - 60}, 200);
});
</script>