104
rated 0 times
[
111]
[
7]
/ answers: 1 / hits: 18389
/ 11 Years ago, sun, february 2, 2014, 12:00:00
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
</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;
}
More From » jquery