how do i contrast the background color of navigation bar when scrolling

Question

i would like to make the fixed navigation bar change its background color to a dark color when it is over bright background color when the page is scrolled. e.g. when it is over white background, it should change to black and vice versa.

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

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

https://stackoverflow.com/questions/23706003/changing-nav-bar-color-after-scrolling — Billy Moat, Apr 10 '18 at 13:22

score 0 · Answer 1 · answered Apr 10 '18 at 13:41

You only should fill in your preferred colors but this should work:

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

I used the onscroll event to change the color and then change it back with a setTimeout function so the color only is changed during scrolling. Hopefully this helps you out.

how do i contrast the background color of navigation bar when scrolling

1 Answers1