滚动时如何对比导航栏的背景颜色[重复]答案

【问题标题】：how do i contrast the background color of navigation bar when scrolling [duplicate]滚动时如何对比导航栏的背景颜色[重复]
【发布时间】：2018-09-20 03:23:47
【问题描述】：

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

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;
}

【问题讨论】：

stackoverflow.com/questions/23706003/…

标签： javascript php html css

【解决方案1】：

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

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

.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">

我使用 onscroll 事件更改颜色，然后使用 setTimeout 函数将其更改回来，因此仅在滚动期间更改颜色。希望这对您有所帮助。

【讨论】：