如何在滚动时仅更改导航的背景颜色，而不更改文本和徽标不透明度

How to change only background color of the navigation on scroll, without changing text and logo opacity

本文关键字：文本 不透明度 颜色 滚动 导航 背景      更新时间：2023-09-26

我正在尝试在滚动时将导航栏的不透明度从低更改为高。我的代码正在工作，唯一的问题是导航菜单项也失去了不透明度。我希望它们以及徽标始终保持白色和不透明度 1，只想更改背景不透明度。这是我的代码

.HTML

<nav>
<div id='cssmenu'>
<div id="logo">
        <a href="#"><img src="images/logo.png" /></a>
</div>                           
<ul>   
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Products</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</nav>

.CSS

#cssmenu {
font-family: Montserrat, sans-serif;
background-color: #09090c;
position: fixed;
width:100%; 
background-color:rgba(9, 9, 12, 1); 
}
#cssmenu > ul > li {
float: right;
}
#cssmenu img{
float:left;
margin-left:10px;
}

.JS

$(document).on('scroll', function (e) {
$('nav').css('opacity', ($(document).scrollTop() / 200));
});

代替不透明度，你可以更好地使用RGBA。

因此，当您滚动时，让它从背景：rgba（255，255，

255，0）转到背景：rgba（255，255，255，1）;

使用 

rgba(red, green, blue, alpha)

而不是 

opacity

最后一个数字表示颜色的不透明度，1 表示全彩色，0.5 表示 50% 不透明度。值介于 0 - 255 之间。

在您的示例中，它是 

rgba(9, 9, 12, 1)

为全彩。

您可以使用此工具将十六进制 （#ffffff） 转换为 rgb，例如：http://hex2rgba.devoth.com/

相关文章：