title: How to created Fading In Navbar after scroll?
body: <p>I have a cover photo which, using jscript, stretches the entire window on any resolution. When you scroll down the cover page goes up and content appears. I am trying to have the navbar fade in once the cover photo is completely scrolled up and then keep the navbar static the rest of the page unless you scroll back up to the cover photo which will have the navbar fade back out. Unfortunately if i make the position of the navbar fixed, it will not show at all. Please help.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="container"&gt;
  
      &lt;div id="header"&gt;
      &lt;/div&gt;
  
      &lt;div id="navbar"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html, body{
      height:100%;
      margin:0;
      background:#F9F9F9;
      /*This is to cut off the white border around the webpage*/
  }
  
  #container {
      position: relative;
  
      max-width: 2048px;
      margin: 0px auto; 
      width: 100%;
      height:100%;
  }
  
  #header {
      background: url('../images/cover6.jpg') no-repeat;
      background-size:cover;
      height: 100%;
      margin:0px auto;
      width:100%;
  }
  
  #navbar ul{
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
  </code></pre>
  
  <p>JSS</p>
  
  <pre><code>&lt;script&gt;
     $(window).resize(function() {
     $("#container").height($(window).height());
     });
  &lt;/script&gt;
  
  
  &lt;script&gt;
     (function ($) {
       $(document).ready(function(){
  
         // hide .navbar first
         $("#navbar").hide();
  
         // fade in .navbar
         $(function () {
           $(window).scroll(function () {
             // set distance user needs to scroll before we fadeIn navbar
             if ($(this).scrollTop() &gt; 1000) {
                $('#navbar').fadeIn();
             } else {
                $('#navbar').fadeOut();
             }
         });
  
  
      });
  
     });
     }(jQuery));
  &lt;/script&gt;
  </code></pre>