title: Make navigational bar transparent when reached anchor point
body: <p>Im trying to make my navigational bar go transparent when it reaches an anchor point that I setup down the website.</p>
  
  <p>Here is my Html </p>
  
  <pre><code>&lt;div class = "nav_bar"&gt;
      &lt;ul&gt;
          &lt;a href = "#index"&gt;&lt;li&gt;Home&lt;/li&gt;&lt;/a&gt;
          &lt;a href = "#about"&gt;&lt;li&gt;About&lt;/li&gt;&lt;/a&gt;
          &lt;a href = "#&gt;&lt;li&gt;Logo&lt;/li&gt;&lt;/a&gt;
          &lt;a href = "#work"&gt;&lt;li&gt;Work&lt;/li&gt;&lt;/a&gt;
          &lt;a href = "#contact"&gt;&lt;li&gt;Contact&lt;/li&gt;&lt;/a&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS</p>
  
  <pre><code>.nav_bar {
              background-color: #ffc323;
              position: fixed;
              width: 100%;
              height: 80px;
              left: 0;
              top: 0;
              z-index: 10;
  
  }
  </code></pre>
  
  <p>This is the Jquery Code that I have so far but it doesn't seem to work.</p>
  
  <pre><code>var x = $("#about").offset().top;
  
  $(document).scroll(function(){
      if($(".nar_bar").scrollTop() &gt; x)
      {
          $(".nav_bar").css({"background-color":"none"});
      }
  });
  </code></pre>
  
  <p>Im basically trying to reverse the nav bar of this website </p>
  
  <p><a href="http://dangblast.com" rel="nofollow">http://dangblast.com</a></p>
  
  <p>Is there a different method of doing this ? </p>
  
  <p>Or am I getting closer to achieving the desired effect. </p>