javascript - 如何在滚动时在浏览器顶部制​​作粘性菜单？

Question

您好，我正在尝试将菜单设置为粘性菜单下方的菜单，我希望当浏览器向下滚动到它时它会粘在屏幕顶部。下面是我到目前为止的代码，但它不起作用，有人可以告诉我哪里出了问题吗？

谢谢

html

</div>
<ul id="menu">
<li><a href="#">HOME</a></li>
<li><a href="#">TREATMENTS</a>
    <ul>
        <li><a href="#">Claim Kandi</a></li>
        <li><a href="#">Claim Kandi2</a></li>
        <li><a href="#">Claim Kandi3</a></li>
    </ul>
</li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">BOOKING</a></li>

JavaScript

<script type="text/javascript">$(document).scroll(function() { 
var y = $(document).scrollTop(), header = $("#menu"); if(y >= 300) 
{ header.css({position: "fixed", "top" : "0", "left" : "0"}); } else {header.css("position", "relative"); } });</script>

CSS

#menu {
display: inline-block;
min-width: 100%;
list-style:none;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
position: relative;
top:112px;
background-color:#666;
text-align: center;
}

Answer 1

我为它做了一个jsFiddle。

http://jsfiddle.net/gA8e5/

我使用了 addClass() 和 removeClass() 是一种更优雅的方法。