How to invert text color according to what's behind it? (not only background)

All the solutions I have found only work inverting the color of the text element, according to the color of the background. I want the color of the text to be inverted according to whatever is placed behind it (images, videos, 3D models etc.).

I have some sticky elements in my page, I want their color to change dynamically as the user is scrolling to the inverted color of whatever is displayed behind the text at that moment.

Thanks.

>Solution :

I thought mix-blend-mode: difference; would do just that. ✌️

#bg {
  background-image:url(https://thumbs.dreamstime.com/b/beautiful-multicolored-bokeh-lights-holiday-glitter-background-christmas-new-year-birthday-celebration-high-resolution-image-133585052.jpg);
}
#test {
  font-size:20vw;
  color:#FFF;
  mix-blend-mode: difference;
}

<div id="bg">
<div id="test">testing</div>
</div>