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

.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函数将其更改回来，因此仅在滚动期间更改颜色。希望这可以帮助你。

滚动时如何对比导航栏的背景颜色

1 个答案: