滚动[复制]时，如何对比导航栏的背景色

Question

我想让固定导航栏在页面滚动时，当它超过明亮的背景颜色时，它的背景颜色变为深色。例如，当它超过白色背景时，它应该变为黑色，反之亦然。

html

<div class="back" ></div>
<div class="navbar">
<div class="nav1">
    <button class="nav">Services</button>
    <button class="nav">Sermons</button>
    <button class="nav">Counselling</button>
</div>
<div class="nav2">
    <button class="nav">Callender</button>
    <button class="nav">Live</button>
    <button class="nav">Infor</button>
</div>
</div>
<div class="back2">

该Css

.back{
background-color: #808080;
position:absolute;
top:0;
right:0;
width:100%;
height: 800px;
z-index: -5;
}
.navbar{    
padding:10px;
position:fixed;
 background-color: rgba(255,255,255,0.3);
left:0;
right:0;
top:0;
z-index: 5;
}
.nav1{  
float:left;
}

.nav2{
 float:right;
position:absolute;
right: 0%;
}
.nav{
border:0;
color:#ffffff;
margin-left:60px;
background:0;
}   
.back2{
background-color: #FFFFFF;
position:absolute;
top:800px;
height: 800px;
left:0;
right:0;
}

Answer 1

您只需填写您喜欢的颜色，但这应该可以：

document.onscroll = () => {
 navbar.style.backgroundColor = "gray";
 setTimeout(function(){ 
 navbar.style.backgroundColor = "rgba(70,70,70)" 
 }, 0);
}

css lang-css prettyprint-override">.back{
background-color: #808080;
position:absolute;
top:0;
right:0;
width:100%;
height: 800px;
z-index: -5;
}
.navbar{    
padding:10px;
position:fixed;
 background-color: rgba(255,255,255,0.3);
left:0;
right:0;
top:0;
z-index: 5;
}
.nav1{  
float:left;
}

.nav2{
 float:right;
position:absolute;
right: 0%;
}
.nav{
border:0;
color:#ffffff;
margin-left:60px;
background:0;
}   
.back2{
background-color: #FFFFFF;
position:absolute;
top:800px;
height: 800px;
left:0;
right:0;
}

<div class="back" ></div>
<div class="navbar" id="navbar">
<div class="nav1">
    <button class="nav">Services</button>
    <button class="nav">Sermons</button>
    <button class="nav">Counselling</button>
</div>
<div class="nav2">
    <button class="nav">Callender</button>
    <button class="nav">Live</button>
    <button class="nav">Infor</button>
</div>
</div>
<div class="back2">