javascript - 到达 anchor 时使导航栏透明

Question

我试图让我的导航栏在到达我在网站下方设置的 anchor 时变得透明。

这是我的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

是否有其他方法可以做到这一点？

或者我是否正在接近实现预期效果。

Answer 1

使用 RGBA 设置不透明度:

background-color:RGBA(1,1,1,0.1);

这应该可行