[英]How to make a sticky menu at top of browser when scrolling?
Hello I am trying to make the menu below a sticky menu, I want it to stick to the top of the screen when the browser scrolls down to it. 您好,我试图将菜单置于粘滞菜单下方,当浏览器向下滚动时,我希望它停留在屏幕顶部。 Below is the code I have so far but it is not working, can somebody please advice me where I have gone wrong.
下面是我到目前为止的代码,但是它不起作用,有人可以建议我哪里出错了。
Thank you 谢谢
html 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 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 的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;
}
I made a jsFiddle for it. 我为此做了一个jsFiddle。
http://jsfiddle.net/gA8e5/ http://jsfiddle.net/gA8e5/
I used the addClass()
and removeClass()
is a more elegant way of doing this. 我使用了
addClass()
和removeClass()
是一种更优雅的方法。
It seems that you haven't fixed the position on your #menu
. 看来您尚未确定
#menu
上的位置。 You have it relative
instead. 您有它
relative
。 Try this: 尝试这个:
#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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.