title: How to make a sticky menu at top of browser when scrolling?
body: <p>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.</p>
  
  <p>Thank you</p>
  
  <p>html</p>
  
  <pre><code>&lt;/div&gt;
  &lt;ul id="menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;TREATMENTS&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Claim Kandi&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Claim Kandi2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Claim Kandi3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;BOOKING&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;$(document).scroll(function() { 
  var y = $(document).scrollTop(), header = $("#menu"); if(y &gt;= 300) 
  { header.css({position: "fixed", "top" : "0", "left" : "0"}); } else {header.css("position", "relative"); } });&lt;/script&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#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;
  }
  </code></pre>