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

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() 是一种更优雅的方式。

Answer 2

您的#menu 上的位置似乎没有固定。你有它relative 代替。试试这个：

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