title: Sticky navigation hidden until scrolling down page
body: <p>I'm running into an issue where I have two navigation menu's on the same page. I want both to be shown separately in which one involves being a sticky navigation. I want this one hidden until I scroll down and cant see the other that appears. Is there a way we can make this work? </p>
  
  <pre><code>&lt;!-- Start Sticky Navigation --&gt;
          &lt;nav id="mainnav"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="span4"&gt;
                          &lt;a href="#" class="logo"&gt;&lt;img src="img/logo2.png" alt="LOGO"&gt;&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="span8"&gt;
                          &lt;ul id="fluid-nav" class="fluid-navigation visible-desktop"&gt;
                              &lt;li class="current"&gt;&lt;a href="#home"&gt;Top&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#productoverview"&gt;Overview&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#imagegallery"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#nocomp"&gt;No Compromises&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#selectbuy"&gt;&lt;button class="btnbuy small"&gt;Select &amp; Buy&lt;/button&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;!-- End Sticky Navigation --&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>nav#mainnav {
  width: 100%;
  height: 50px;
  background-color: #cb0000;
  overflow: hidden;
  position: relative;
  z-index: 999;
  }
  </code></pre>