上部の固定メニューがページ内リンクでスクロールすると消えてしまう。

###質問
ページ内スクロールをすると上部の固定メニューが表示されなくなってしまいます。どこを修正すればよいでしょうか？

###該当のソースコード

html
1<div id="menu-box">
2  <div id="toggle"><a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a><a href="#" id="panel-txt">menu</a></div>
3  <ul id="menu">
4    <li><a href="#!page1">html</a></li>
5    <li><a href="#!page2">css</a></li>
6  </ul>
7</div>
8<div id="container">
9<section id="stage1" class="stageBase">
10<div class="fieldWrap">
11<p>ここは1ページ目</p>
12</div>
13</section>
14<section id="stage2" class="stageBase">
15<div class="fieldWrap">
16<p>ここは2ページ目</p>
17</div>
18</section>
19</div>

CSS
1*{
2  box-sizing:border-box;
3  margin:0;
4}
5body { 
6  background: url(../images/christmas.png) no-repeat center center fixed; 
7  -webkit-background-size: cover;
8  -moz-background-size: cover;
9  -o-background-size: cover;
10  background-size: cover;
11  position: relative;
12  overflow: hidden;
13  visibility: hidden;
14}
15
16#menu{
17  width: 100%;
18  margin: 0 auto;
19  padding: 0;
20  z-index: 150;
21  position:fixed;
22}
23#menu li{
24  display: block;
25  float: left;
26  width: 50%;
27  margin: 0;
28  padding: 0;
29  }
30#menu li a{
31  display: block;
32  padding: 14px 0 10px;
33  background: #333;
34  color: #fff;
35  text-align: center;
36  text-decoration: none;
37  height: 50px;
38}
39#menu li a:hover{
40  background: #444;
41}
42#toggle{ 
43 display: none;
44}
45
46/* #container
47--------------------------- */
48#container {
49  top: 0;
50	left: 0;
51    margin-top: 50px;
52	width: 100%;
53	position: absolute;
54	z-index: 1;
55}
56
57/* .stageBase
58--------------------------- */
59.stageBase {
60	width: 100%;
61	position: relative;
62	overflow: hidden;
63}
64.stageBase .fieldWrap {
65	padding: 100px 0 0 0;
66	text-align: center;
67}
68#stage1 {background:none;}
69#stage2 {background:#eee;}