How to only have menu appear on scroll?

Question

Below is the following code for the menu in my website, below that is the JS code that makes my menu fix to the top of the browser window when the user scrolls down 100px.

After much consideration what I need to do is make the menu not display in its original position (before scrolling 100px). I have tried display:none however this makes the fixed menu when scrolling disappear too however I want this to show still.

What I am trying to achieve is no menu being visible until the user scrolls.

HTML CODE

<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 to make menu fixed on scroll

<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>

APOLOGIES MY CSS IS BELOW

#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; }

Answer 1

In your CSS, add display: none; to #menu , as you said.

Then add display: table to #menu.fixed