сделать навигационный бар прозрачным при достижении точки привязки

Question

Im пытается сделать свой навигационный бар пойти прозрачным, когда она достигает точки привязки, что я настройка вниз на сайте.

Вот мой Html

<div class = "nav_bar"> 
    <ul> 
     <a href = "#index"><li>Home</li></a> 
     <a href = "#about"><li>About</li></a> 
     <a href = "#><li>Logo</li></a> 
     <a href = "#work"><li>Work</li></a> 
     <a href = "#contact"><li>Contact</li></a> 
    </ul> 
</div> 

Вот мой CSS

.nav_bar { 
      background-color: #ffc323; 
      position: fixed; 
      width: 100%; 
      height: 80px; 
      left: 0; 
      top: 0; 
      z-index: 10; 

} 

Это Jquery код, который я до сих пор, но это не похоже на работу.

var x = $("#about").offset().top; 

$(document).scroll(function(){ 
    if($(".nar_bar").scrollTop() > x) 
    { 
     $(".nav_bar").css({"background-color":"none"}); 
    } 
}); 

Im в основном пытаются переломить навигационную панель этого сайта

http://dangblast.com

Есть ли другой способ сделать это?

Или я приближаюсь к достижению желаемого эффекта.

Answer 1

Попробуйте вместо этого:

"opacity": "0" 

Он должен работать

Answer 2

использования RGBA для непрозрачности:

цвет фона: RGBA (1,1,1,0.1);

это должно работать