【发布时间】：2018-07-05 15:27:31
【问题描述】：
是否可以更改标题的类别，以便在背景更改时更改其颜色？我有一个标题和一些部分。标题是固定的，当它到达具有不同背景颜色的部分时，我想更改标题颜色以获得更好的可读性，但我不知道该怎么做。我已经在网上搜索了它，但我找不到任何东西。
这是我目前得到的：（见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>
)
}
}
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;
}
那么，有什么提示吗？
【问题讨论】：
-
绑定一个滚动事件，检查想要的元素是否可见，如果可见就调用setState。
-
@learner 如果多个部分同时可见怎么办？那么这个解决方案将无法正常工作。
-
在这种情况下你想做什么？
multiple sections是什么意思？你想只检查背景色吗？在这种情况下，您可以检查：myDiv.style.backgroundColor. -
@learner 他想在标题到达具有不同背景颜色的新部分时更改标题中文本的颜色以获得更好的对比度。
标签： javascript css reactjs