title: navbar opacity/rgba change on scroll
body: <p>I've been trying to create a nav that would be transparent at the top and would gain white color as the user scrolls down the page. My header height is <code>800px</code> and I want my nav to lose 100% of transparency after those <code>800px</code>. Here`s my code:</p>
  
  <pre><code>&lt;header id="header"&gt;
     &lt;nav class="navbar"&gt;
         &lt;ul class="navigation"&gt;
             &lt;li&gt;&lt;a href="#header"&gt;Home&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;About us&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;Our qualities&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;Contact us&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;contact us&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
     &lt;/nav&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>nav  {
      width: 1600px;
      position: fixed;
      top: 0; 
  
      ul {
          margin: 0 auto;
  
          li {
              display: inline-block;
              padding: 5px 20px;
  
              a {
                  font-family:  $f1;
                  font-size: 16pt;
                  color: $c3;
              }
          }
      }
  }
  }
  </code></pre>
  
  <p>First I tried with opacity, but it didn't work, and on top of that child elements (<code>ul</code> and <code>li</code>) had opacity of 0 as well.
  Here`s the JS for that:</p>
  
  <pre><code>jQuery(document).ready( function() {        
      var navOffset = jQuery("nav").offset().top;
  
      jQuery(window).scroll(function() {
          var scrollPos = jQuery(window).scrollTop();
          var navOpacity = scrollPos /800;
          jQuery('.navbar').css(opacity, 'navOpacity');
  
          if (jQuery('nav').css('opacity') &lt; 1) {
              jQuery('.navigation').css('opacity', '1')  
          };
  </code></pre>
  
  <p>Then I tried to change RGBA value on scroll, that didn't work either
  Instead of </p>
  
  <pre><code>jQuery('.navbar').css( opacity, 'navOpacity' ); 
  </code></pre>
  
  <p>I used </p>
  
  <pre><code>jQuery('.navbar').css(backgroundcolor, 'rgba (255, 255, 255, + "navOpacity")');
  </code></pre>
  
  <p>That failed as well, so, I have to ask you too help me</p>