Javascript 如何仅在滚动上显示菜单？

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

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

我试图实现的是，在用户滚动之前，菜单不可见

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>

---

在CSS中，添加

display:none到
#菜单

然后将
display:table
添加到
#菜单中。修复了
您要找的东西不太清楚，您能给出一个直观的表示吗？请同时添加您的（相关）csscode@Pogrindis我附上了一个问题的现场链接，标题下的菜单我希望隐藏，但在滚动时，我希望固定在浏览器窗口顶部的菜单仍然隐藏visible@LorenzoMarcon我现在已经添加了css。。。对不起，这么简单！非常感谢你，洛伦佐。一双新鲜的眼睛会让一切变得不同！
<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>

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