如何仅使菜单出现在滚动条上？

以下是我网站上菜单的以下代码，以下是当用户向下滚动100px时使我的菜单固定在浏览器窗口顶部的JS代码。

经过深思熟虑，我需要做的是使菜单不显示在其原始位置（滚动100px之前）。我尝试过display：none，但是这也使滚动时的固定菜单消失了，但是我希望它仍然显示。

我要达到的目的是，直到用户滚动菜单才可见。

HTML代码

<ul id="menu" name="menu">
<li><img id="myImage" alt="Cambridge Website Design Company" src="logo1.png"  width="90" height="31" />
</li>
<li>
  <div><a href="index2.html">About Us</a>
  </div>
</li>
<li><a href="#">Services</a>
    <ul>
        <li><a href="graphic.html">Graphic Design</a>
        </li>
        <li><a href="website.html">Website Design</a>
        </li>
        <li><a href="budget.html">Budget Design</a>
        </li>
         <li><a href="hosting.html">Web Hosting</a>
        </li>
        <li><a href="printing.html">Printing</a></li>
        <li><a href="copywriting.html">Copy Writing</a></li>
    </ul>
</li>
<li><a href="#">Community</a>
  <ul>
        <li><a href="creative.html">Get Creative!</a>
    </li>
        <li><a href="charity.html">Charity Work</a>
        </li>
        <li><a href="impress.html">Internships</a>
        </li>
        <li><a href="careers.html">Careers</a>
        </li>
  </ul>
</li>
<li><a href="contact.html">Contact</a>

</li>
<li><a href="crc.html" target="_blank"><img src="logocrc.png" alt="Cambridge Regional College Website Design Students" width="100" height="25" border="0" /></a>
</li>
</li>
<li><a href="ruskin.html" target="_blank"><img src="logoruskin.png" alt="Cambridge Anglia Ruskin Website Design Students" width="100" height="28" border="0" /></a>
</li>
</li>
<li><a href="http://thedesigncompany.tumblr.com" target="_blank">Blog</a>
</li>
</ul>

JAVASCRIPT使菜单固定在滚动条上

<script>
$(document).scroll(function () {
var y = $(document).scrollTop(),
   image = $("#myImage"),
   header = $("#menu");


if (y >= 100) {
    //show the image and make the header fixed
    header.addClass('fixed');
    image.show();
} else {
    //put the header in original position and hide image
    header.removeClass('fixed');
    image.hide();
}
});
</script>

抱歉，我的CSS低于

#menu, #menu ul {
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
}
#menu {
font-weight:400;
display: table;
width: 100%;
list-style: none;
position: relative;
top: -20px;
text-align: center;
left: -10px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 20px;
z-index: 1101;
}
#menu.fixed {
position: fixed;
top: 0;
width: 100%;
}
#menu li {
display: table-cell;
list-style: none;
padding-right: 50px;
left: 50px;
vertical-align: middle;
}
#menu > li.active > ul {
background:#FFF;
display: block;
left: 0;
width: 100%;
-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
border-top:thin dotted #999;
top: 32px;
height: 30px;
}
#menu > li > ul {
display: none;
position: absolute;
 text-align: center;

}
#menu li a {
display: block;
padding: 2px 10px;
text-decoration: none;
font-weight: 400;
white-space: nowrap;
color: #333;


}
#menu li a:hover {
color: #28B701;
font-size: 18px;
vertical-align: middle;
font-family: 'Lato', "sans-serif; 700;";
}
#menu li ul li {display: inline-block;
float:none; }