title: Create a disappearing header similar to the one found in Chrome for Android
body: <p>I have a mobile optimized website with a fixed header. I was thinking about implementing a disappearing functionality to the header in a similar manner as Chrome for Android.</p>
  
  <p>The gist of the behavior is that when the user scrolls up the header gradually disappears with the content, and then gradually re-appears when scrolling up &mdash; unlike <a href="https://stackoverflow.com/q/17136513/1344955">this question</a>&rsquo;s answer where the header appears/disappears completely.</p>
  
  <p>My current header looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css');
  @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
  header {
    position: fixed;
    top: 0;
    width: 100%;
  }
  header nav {
    box-shadow: none !important;
  }
  #content {
    margin-top: 56px;
    padding: 10px;
    background: #f5f5f5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;nav&gt;
      &lt;div class="nav-wrapper"&gt;
        &lt;a href="#" class="brand-logo"&gt;My Awesome Website&lt;/a&gt;
        &lt;ul id="nav-mobile" class="right"&gt;
          &lt;li&gt;&lt;a&gt;&lt;i class="material-icons"&gt;settings&lt;/i&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  
  &lt;div id="content"&gt;
    &lt;p class="flow-text"&gt;This is where the rest of the website&amp;rsquo;s content should be&lt;/p&gt;
    &lt;br&gt;&lt;br&gt;
    &lt;p&gt;Don&amp;rsquo;t mind me, just adding a few blank lines to make this scrollable&amp;hellip;&lt;/p&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I implement this using jQuery?</p>