Change text color black to white on overlap of bg

Question

I have a div that is positioned absolute with a background color gradient. I have this text on it that I want to change to the color white as I scroll the text up.

I

Answer 1

You can measure with JavaScript and apply styles to tags that fall inside the range you want, but you can also do something very simple to make the text readable (this falls under “some other trick I can do”):

.scroll-content {
  text-shadow: 0 0 3px white;
}

This will only show up when it’s over the blue background, and disappear over the white background. This does depend on the effect you want to achieve, though.

Even with a JavaScript implementation, you might consider this for progressive enhancement (for JS-less users).