title: How do I make an element disappear and reappear when scrolling down?
body: <p>So on my website I have a fixed bar at the top which spans the length of the page, the bar is a h1. Attached to that is a mini navigation with back and home buttons which sits below it and is also fixed. The mini nav gets in the way when reading the page content as you scroll down so I would like to make the nav disappear when the user scrolls down and also give the option to have it reappear by moving the mouse over the top/clicking the top bar/swiping the top bar on a touch screen etc etc.</p>
  
  <p>How do I go about doing this? </p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;header class="mainHeader"&gt;
    &lt;h1&gt;Page Title&lt;/h1&gt;
      &lt;nav class="secondaryNav"&gt;
        &lt;a href="home.htm"&gt;&lt;img class="backButton" src="img/back2.png" alt="Back Button"&gt;&lt;/a&gt;
        &lt;a href="home.htm"&gt;&lt;img class="homeButton" src="img/home.png" alt="Home Button"&gt;&lt;/a&gt;
      &lt;/nav&gt;
      &lt;aside&gt;&lt;p id="countdown"&gt;&lt;/p&gt;&lt;/aside&gt;
  &lt;/header&gt;
  &lt;!-- end .mainHeader --&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.mainHeader h1 {
      position: fixed;
      top: 0;
      width: 100%;
      background: #ea594e;
      box-shadow: 0 0 3px 3px #888888;
      font-family: verdana;
      font-variant: small-caps;
      color: white;
      border-bottom: 1px solid black;
      margin: 0;
      padding-bottom: 0.5%;
      text-align: center;
  }
  
  .mainHeader .secondaryNav {
      background: #ffcda4;
      box-shadow: 0 3px 3px 1px #888888;
      border: 1px solid;
     border-top: none;
      width: 400px;
      position: fixed;
      top: 49px;
      left: 50%;
      margin-left: -200px;
      border-radius: 0 0 50px 50px;
      padding-top: 5px;
  }
  </code></pre>
  
  <p>The bar is h1 and the mini nav is secondaryNav</p>