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;

}