メニューバーを、スクロール時に最上部に固定したいです。

前提・実現したいこと

html、css、jsは無料のテンプレートを使用しています。

元々はロゴや電話番号とメイン画像の間にある
メニューバーを、スクロール時に最上部に固定したいです。

発生している問題・エラーメッセージ

固定は出来たのですが、スクロール前から最上部にいってしまいます。

エラーメッセージ

該当のソースコード

html
1
2<!-- ヘッダー -->
3<div id="header">
4	<div class="inner">
5  
6  	<h1>ホームページサンプル株式会社のサイトです</h1>
7
8		<!-- ロゴ -->
9		<div class="logo">
10			<a href="index.html">Company Name<br><span>Your Company Slogan</span></a>
11		</div>
12		<!-- / ロゴ -->
13    
14    <!-- 電話番号+受付時間 -->
15		<div class="info">
16    	<p class="tel">電話: <strong>012-3456-7890</strong></p>
17			<p>受付時間: 平日 AM 10:00 〜 PM 5:00</p>
18    </div>
19		<!-- / 電話番号+受付時間 -->
20    
21
22
23  <!-- トップナビゲーション -->
24	<ul id="topnav" class="fixed">
25		<li class="active"><a href="index.html">トップページ<br><span>Top</span></a></li>
26		<li><a href="subpage.html">ごあいさつ<br><span>Greeting</span></a></li>
27		<li><a href="subpage.html">サービス概要<br><span>Service</span></a></li>
28		<li><a href="subpage.html">弊社の取り組み<br><span>Approach</span></a></li>
29		<li><a href="subpage.html">会社情報<br><span>Company</span></a></li>
30		<li><a href="subpage.html">お問い合わせ<br><span>Contact</span></a></li>
31	</ul>
32	<!-- トップナビゲーション -->
33  
34  </div>
35  
36</div>
37<!-- / ヘッダー -->
38
39<!-- メイン画像 -->
40<div id="mainBanner" class="mainImg">
41	<div class="inner">
42		<img src="images/mainImg.jpg" width="940" height="300" alt="">
43    <div class="slogan">
44			<h2>自然との調和を目指す企業です</h2>
45			<h3>革新的な技術で世の中を動かす企業を目指します。</h3>
46		</div>
47	</div>
48</div>
49<!-- / メイン画像 -->
50
51
52

css
1
2.inner{
3margin:0 auto;
4width:100%;
5}
6
7
8/*************
9/* ヘッダー
10*************/
11h1{
12font-size:12px;
13line-height:1.6;
14font-weight:normal;
15}
16
17#header{
18overflow:hidden;
19padding:5px 0 0;
20}
21
22* html #header{height:1%;}
23
24
25/*************
26/* ロゴ
27*************/
28#header .logo{
29float:left;
30padding:20px 0;
31}
32
33.logo a{
34font-size:20px;
35font-weight:bold;
36line-height:1;
37font-family:"Palatino Linotype", "Book Antiqua", Palatino,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
38}
39
40.logo span{
41font-size:12px;
42font-weight:normal;
43}
44
45.info{
46float:right;
47padding:20px 0;
48}
49
50.tel strong{
51font-size:20px;
52font-weight:bold;
53}
54
55/**************************
56/* トップナビゲーション
57**************************/
58ul#topnav{
59clear:both;
60overflow:hidden;
61margin:0 auto 30px;
62background:#df8b04;
63}
64
65
66/*追記*/
67.fixed{
68  position: fixed;
69  top: 0;
70  z-index: 10;
71  margin-top: 100px;
72  padding-top: 100px;
73}
74
75
76

js
1
2.fixed $(function () { 
3  $(window).scroll(function () {
4    if ($(this).scrollTop() > 100) { //100px以上スクロールした固定
5      $('#menu').addClass('fixed');
6    } else {
7      $('#menu').removeClass('fixed');
8    }
9  });
10});
11