Question

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

这是我的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进行不透明度：

背景色：RGBA（1,1,1,0.1）;

这应该有效

Answer 2

请改为尝试：

"opacity": "0"

应该有效

到达锚点时使导航栏透明

2 个答案: