title: Making a sticky header stick to the top
body: <p>I have managed to make a dropdown for a website I am designing and I'm a bit stuck on the sticky header part..</p>
  
  <p>My header has the sticky effect however when i scroll down the header does not stick to the top of the page. It always maintains a margin of 80px from the top as i mentioned in the CSS.</p>
  
  <p>How can i make the header stick to the TOP when i scroll and when i scroll back to the top of the page it should retain its original position. Hope i have made myself clear.</p>
  
  <p>Just pasting my CSS as the HTML is too lengthy in the fiddle.</p>
  
  <pre><code>#nav, #nav ul {
      list-style: none outside none;
      margin: 0;
      padding: 0;
      z-index:9998;
      position:relative;
  }
  </code></pre>
  
  <p>Check <a href="http://jsfiddle.net/marsone/5GqYh/" rel="nofollow">this fiddle</a> for a DEMO I have created.</p>
  
  <p><strong>EDIT:</strong> Just to be clear. I want the top:80px to be there initially. I only want the header to stick to the top while scrolling. <a href="http://www.flipkart.com/" rel="nofollow">EXAMPLE</a></p>