Header

On screens taller than the window height, the <header> should disappear when the user scrolls down, and then reappear when the user scrolls back up.

Notes

Scroll down to see the <header> disappear. Then scroll up to see it reappear.

Please note that this behavior currently relies on the headroom.js plugin.

html

<header id="header" class="header--fixed">
  <div class="logo">
    <img src="../../src/images/logo.png" alt="Farmer's Insurance logo">
  </div>
  <nav>
    <ul>
      <li><a href="#!">Home</a></li>
      <li><a href="#!">Log Out</a></li>
    </ul>
  </nav>
</header>