Is it possible to change the class of my header so that it will change its color when the background changes? I have a header and some sections. The header is fixed and when it foreaxmple reaches a section with a different backgroundcolor, I want to change the headers color for better readability, but I don't know how to do that. I've searched the web for it but I couldn't eally find something.
this is what I got so far: (see this JSFIDDLE )
class Div extends React.Component{
constructor() {
super()
this.state = {
headerClass: 'white'
}
}
changeColor() {
// something like
this.setState({ headerClass: 'black'})
}
render(){
return(
<div>
<div id="header">
<h1 className={`${this.state.headerClass}`}>
This is the header
</h1>
</div>
<div id="section_1" className="section">
This is section 1
</div>
<div id="section_2" className="section">
This is section 2
</div>
<div id="section_3" className="section">
This is section 3
</div>
<div id="section_4" className="section">
This is section 4
</div>
<div id="section_5" className="section">
This is section 5
</div>
</div>
)
}
}
the CSS:
#main {
height: 2000px;
position: relative;
}
#section_1 {
background: grey;
}
.section {
height: 400px;
background: white;
padding: 30px 0;
}
#header {
height: 50px;
background: transparent;
position: fixed;
width: 100%;
left: 0;
top: 0;
right: 0;
z-index: 1
}
h1 {
color: white;
}
So, are there any hints?
multiple sections
? Do you want to check for only backgroundcolor? In that case you can check for: myDiv.style.backgroundColor.