スティッキーメニュー：スクロール前のクリックでのFIXについて

ページを作成しており、下記の動作で躓いております。
CSS、jQueryいずれの方法でも最終的に動作が完了できればこだわりはありません。

したいこと

スティッキーヘッダー設置しヘッダー内メニューをクリックすると、該当記事へ移動、その際記事に食い込まないよう、ヘッダーの高さ分マイナスする。

問題点

スクロール前にヘッダー内メニューのリンクをクリックすると、該当記事へスクロールはするのですが、ヘッダーの高さがマイナスされず、コンテンツに食い込んでしまう。

設定

・記事は8個、それぞれヘッダーメニューからアンカーでスクロール
・記事にヘッダーメニューが食い込まない
・各記事のヘッダーにSVGがあり、その分マイナスマージンを取っている
・スティッキーヘッダーには画像リンクとテキストリンクの2つのULがあり、画像はFIX時は表示しない。

その他

・記事内にアコーディオンあり
・最初の記事のみ記事内にbxslider設置
・レスポンシブ対応（※スマホ時はスティッキーメニューは使用しない）

ご教授の程よろしくお願いいたします。

HTML
1<div id="cp">
2<div id="container">
3<!-- メニュー -->
4<div id="cpMenu" class="pc">
5<ul class="fixImg">
6<li><a href="#courseA"><img src="" /></a></li>～<li><a href="#courseH"><img src="" /></a></li>
7</ul>
8<ul class="navbar-nav">
9<li><p><a href="#courseA"><img src="" /></a></p></li>～<li><p><a href="#courseH"><img src="" /></a></p></li>
10</ul>
11</div>
12<!-- /メニュー -->
13
14<!-- メインコンテンツ -->
15<div class="contentsInner">
16<div id="course">
17
18<!-- コースA -->
19<div class="courseOuter" id="courseA">
20<div class="svgArea">
21<svg class="bigTriangleColorB" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
22<path d="M0 100L50 5L100 100" />
23</svg>
24</div>
25
26<div class="coursContents bgcB">
27<div class="courseInner">
28<div class="courseHead">
29</div>
30
31<div class="slideArea">
32<div class="slider">
33</div>
34</div>
35courseA
36<!-- accordion -->
37<div class="tabBtn">
38<p class="btn"><i class="fa fa-angle-down" aria-hidden="true"></i></p>
39</div>
40<div class="tabContents">
41<div class="tabContentsInner">
42
43<div class="entryBtn">
44<p class="btn"><i class="fa fa-angle-down" aria-hidden="true"></i></p>
45</div>
46</div>
47</div>
48<!-- accordion -->
49</div>
50</div>
51</div>
52<!-- /コースA -->
53<!-- コースB -->
54<div class="courseOuter" id="courseB">
55<div class="svgArea">
56<svg class="bigTriangleColorW" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
57<path d="M0 100L50 5L100 100" />
58</svg>
59</div>
60
61<div class="coursContents">
62<div class="courseInner">
63<div class="courseHead">
64
65</div>
66courseB
67<!-- accordion -->
68<div class="tabBtn">
69<p class="btn"><i class="fa fa-angle-down" aria-hidden="true"></i></p>
70</div>
71<div class="tabContents">
72<div class="tabContentsInner">
73
74<div class="entryBtn">
75<p class="btn"><i class="fa fa-angle-down" aria-hidden="true"></i></p>
76</div>
77</div>
78</div>
79<!-- accordion -->
80</div>
81</div>
82</div>
83<!-- /コースB -->
84・
85・
86コースがC、D、E、F、G、Hと続きます
87・
88・
89</div>
90<!-- /contentsInner--></div>
91</div><!-- /container-->
92</div>
93
94

CSS
1#cp{
2	width: 100%;
3	margin: 0 auto;
4	padding: 0;
5	text-align: center;
6}
7#cp #container{
8	position: relative;
9	clear: both;
10	overflow: hidden;
11	margin: 0 auto;
12	background-image: url(../img/Bg.png);
13	background-repeat: repeat-x;
14	background-position: center -150px;
15}
16#cp .contentsInner{
17	clear: both;
18	overflow: hidden;
19 }
20#course{
21	clear: both;
22	margin: 0 auto;
23	overflow: hidden;
24}
25#course .courseOuter{
26	display: block;
27	overflow: hidden;
28	margin-top: -100px;
29}
30#course .coursContents{
31	display: block;
32	clear: both;
33	padding-bottom: 200px;
34}
35.bgcB{ background-color: #d2ecfa;}
36.bgcG{ background-color: #eeeeef;}
37
38#course .courseOuter#courseA{
39	margin-top: 100px;
40}
41.fixed {
42	width: 100%;
43    position: fixed;
44    top: 0;
45    z-index: 10000;
46	padding-top: 10px;
47	height: 90px;
48	margin: 0 auto;
49  }
50
51svg {
52	display: block;
53	margin: 0;
54    pointer-events: none;
55}
56.bigTriangleColorB path {
57    fill: #d2ecfa;
58    stroke: #d2ecfa;
59}
60.bigTriangleColorW path {
61    fill: #fff;
62    stroke: #fff;
63}
64.bigTriangleColorG path {
65    fill: #eeeeef;
66    stroke: #eeeeef;
67}
68
69.sp{ display: block !important;}
70.pc{ display: none !important;}
71
72@media screen and (min-width: 768px){
73
74#cp #container{
75background-position: center top;
76}
77.headInner{ width: 100%;}
78#cpMenu ul{
79	width: 100%;
80	margin: 0 auto;
81}
82#cpMenu ul li{
83	float: left;
84	width: 12.5%;
85	margin: 0;
86	border-right: 1px solid #ccc;
87}
88#cpMenu ul li:last-child{ border-right: none;}
89#cpMenu .navbar-nav li:after{
90	content: "\f0d7";
91	font-family: FontAwesome;
92	color: #004097;
93	font-size: 20px;
94}
95.fixed {
96	width: 100%;
97	margin: 0 auto;
98}
99#cp{
100	width: 100%;
101	margin: 0 auto;
102	padding: 0;
103	text-align: center;
104}
105#cp #container{
106	position: relative;
107	clear: both;
108	overflow: hidden;
109	margin: 0 auto;
110}
111#cp .contentsInner{
112	clear: both;
113	overflow: hidden;
114}
115#course .courseInner{
116	width: 100%;
117}
118.sp{ display: none !important;}
119.pc{ display: block !important;}
120
121}
122@media print, screen and (min-width: 1024px){
123.headInner{
124	width: 1120px;
125	margin: 0 auto;
126}
127#cpMenu { width:100%; margin: 0 auto;}
128#cpMenu .navbar-nav.fixed,
129#cpMenu ul{
130	width: 1100px;
131	margin: 0 auto;
132}
133#course .courseInner{
134	width: 1000px;
135	margin: 0 auto;
136}
137.sp{ display: none !important;}
138.pc{ display: block !important;}
139}
140

$(document).on('ready',function(){
	var nav = $('#cpMenu'),
	offset = nav.offset();
	$(window).scroll(function () {		
		$('.navbar-nav a').click(function() {
			var headerHight = 0;
			if ( !$('fixed').is(':visible') ) {
				headerHight = $('.navbar-nav').offset().top-headerHight;
			}
		});
		if($(window).scrollTop() > offset.top) {
			nav.addClass('fixed');
			$('.fixImg').css('display','none');
			var headerHight = 90;
			$('.navbar-nav a').click(function() {
				var speed = 0;
				var href= $(this).attr("href");
				var target = $(href == "#" || href == "" ? 'html' : href);
				var position = target.offset().top-headerHight;
				$('body,html').animate({scrollTop:position}, speed,'' );
				return false;
			});
		} else {
			nav.removeClass('fixed');
			$('.fixImg').css('display','');
		}
	});
});