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

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

• javascript
• jquery
• menu
• position

• "Not working"... How isn't it working? You need to give a better description of the behaviour you're getting, and the behaviour you want – Bojangles Commented Feb 2, 2014 at 17:49

2 Answers 2

I made a jsFiddle for it.

http://jsfiddle/gA8e5/

I used the addClass() and removeClass() is a more elegant way of doing this.

It seems that you haven't fixed the position on your #menu. You have it relative instead. 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;
}