CSS - Change text color depending on background

Question

I have a simple layout consisting of three full height divs and a fixed header bar.

 body,html { padding:0; margin:0; } .header { position:fixed; width:100%; height:50px; color:white; margin:20px; } .section1 { background:black; height:100vh; display: flex; align-items: center; justify-content: center; color:white; } .section2 { background:white; height:100vh; display: flex; align-items: center; justify-content: center; } .section3 { background:black; height:100vh; display: flex; align-items: center; justify-content: center; color:white; } 

 <div class="header"> Header Content </div> <div class="wrapper"> <div class="section1"> Section One Content </div> <div class="section2"> Section Two Content </div> <div class="section3"> Section Three Content </div> </div> 

I am trying to make the header bar text colour change to black when it rolls over the section with the white background.

I have seen a couple of jQuery plugins which should work to achieve this but I am trying to avoid any unnecessary scripts.

Would the CSS mix-blend-mode function allow me to achieve this? Does anybody have an example they can point me to of something similar being achieved?

Answer 1

You can use mix-blend-mode:difference

 body, html { padding: 0; margin: 0; } .header { position: fixed; width: 100%; height: 50px; margin: 20px; color:#fff; mix-blend-mode: difference; } .section1, .section2, .section3{ background: black; height: 100vh; display: flex; align-items: center; justify-content: center; color: white; } .section2 { background: white; color:#000; } 

 <div class="header"> Header Content </div> <div class="wrapper"> <div class="section1"> Section One Content </div> <div class="section2"> Section Two Content </div> <div class="section3"> Section Three Content </div> </div> 

Answer 2

You can do it with jquery, when something happens, do:

$('yourdiv1').css({"color": "black"})
$('yourdiv2').css({"background-color": "white"})

To set it to default just:

$('yourdiv1').css({"color": ""})
$('yourdiv2').css({"background-color": ""})

Also add transitions to make it look really nice.