title: how to build gmail like menu header
body: <p>how can i build fixed menu like gmail menu. i have tried css, but the div stays in middle, it doesnt come up like the gmail menu does on scroll.</p>
  
  <p><a href="https://i.stack.imgur.com/5hi3N.png" rel="nofollow noreferrer">open in large image</a>
  <img src="https://i.stack.imgur.com/5hi3N.png" alt="gmail menu scroll effect"></p>
  
  <p>i have tried using css property, following is some example code (not real code):</p>
  
  <pre><code>.menu {
      position:fixed;
      height: 36px;
      background-color:#fff;
  }
  </code></pre>