当到达定位点时，使导航栏透明

我试图让我的导航栏在到达我在网站上设置的锚点时变得透明。

这是我的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"});
    }
});

我基本上是想扭转这个网站的导航栏

http://dangblast.com

有不同的方法吗？

还是我离达到预期效果越来越近了。