CSS change color on scroll / cut text - overflow z-index

Question

This one is maybe a big riddle. Maybe its not. I want to change the color of a position:fixed menu when scrolling.

Answer 1

If you don't want to have to manage duplicate elements to pull off this effect with CSS clip as per Antony's solution, then you can use a couple jQuery plugins:

• jq-clipthru - This is a superflexible plugin that can probably do everything you want (and a lot more), but it also requires the jQuery UI library. [Demo]

• Unobscure Text - This is my very lightweight plugin that has a very specific use case, but it's not compatible with jQuery 3. [Demo]

If you require jQuery 3 support and don't care for IE 11 and below, then you can use a solution based on SVG clip-path, like this.