ヘッダーメニューのFixedを使ってタイトルをかぶらせないようにしたい

ヘッダーメニューのFixedを使っています。

参考
・ヘッダーメニューの追従
OKU LOG

・ページ内スクロール
Kyasper Web Design キャスパーウェブデザイン

実行したい内容
・ページ内スクロール後、ヘッダーメニューをタイトルにかぶらせないようにしたい

html
1<nav id="headernav" role="navigation">
2	<ul class="headermenu">
3		<li><a href="#menu01" title="menu01">menu01</a></li>
4		<li><a href="#menu02" title="menu02">menu02</a></li>
5		<li><a href="#menu03" title="menu03">menu03</a></li>
6	</ul>
7</nav><!-- # Navigation -->
8<section id="menu01">
9	<h2>Menu01</h2>
10</section>
11<section id="menu02">
12	<h2>Menu03</h2>
13</section>
14<section id="menu03">
15	<h2>Menu03</h2>
16</section>

CSSは割愛させていただきます。

javascript
1// ヘッダーメニューの追従
2$(function() {
3	var headNav = $("#headernav");
4	//scrollだけだと読み込み時困るのでloadも追加
5	$(window).on('load scroll', function (){
6		//現在の位置が500px以上かつ、クラスfixedが付与されていない時
7		if($(this).scrollTop() > 200 && headNav.hasClass('fixed') == false) {
8			//headerの高さ分上に設定
9			headNav.css({"top": '-100px'});
10			//クラスfixedを付与
11			headNav.addClass('fixed');
12			//位置を0に設定し、アニメーションのスピードを指定
13			headNav.animate({"top": 0},600);
14		}
15			//現在の位置が300px以下かつ、クラスfixedが付与されている時にfixedを外す
16			else if($(this).scrollTop() < 200 && headNav.hasClass('fixed') == true){
17			headNav.removeClass('fixed');
18		}
19	});
20});
21
22// ページ内スクロール
23$(function(){
24	// ヘッダの高さを取得する
25	var headerHight = 80;
26	// #で始まるアンカーをクリックした場合に処理
27	$('a[href^=#]').click(function() {
28		// スクロールの速度
29		var speed = 400; // ミリ秒
30		// アンカーの値取得
31		var href= $(this).attr("href");
32		// 移動先を取得
33		var target = $(href == "#" || href == "" ? 'html' : href);
34		// 移動先を数値で取得
35		var position = target.offset().top;
36		// 高さの位置をずらす（ var headerHight の部分を調整 ）
37		var position = target.offset().top-headerHight;
38		// スムーススクロール
39		$('body,html').animate({scrollTop:position}, speed, 'swing');
40		return false;
41	});
42});