EDIT: proven that it does NOT work on Firefox, so probably this is just a Chrome quirk, still interesting behaviour so I'll leave this answer if anyone just wants to build a Chrome only implementation or when Firefox and other browsers come along.
There, I "fixed" it (pun intended :) )
Look at this working fiddle:
JSFiddle example of fixed, relative and overflow working together
You can use relative
parents with overflow
to mimic the effect of the changing color.
Downside: you have to duplicate your menu (which is semantically well, just plain wrong). You could use some basic javascript to do the duplication of the menu though, that would improve it a little. I also only tested this on Chrome, but it seems really basic CSS so I imagine this will work on any browser / device.
Code snippets (the relevant parts)
HTML
<div class="topbar">
<h1>Whoo pink!</h1>
<div class="fixed-menu">Fixed!</div>
</div>
<div class="loads-of-content">
<div class="fixed-menu">Fixed!</div>
</div>
CSS
.topbar {
position: relative;
overflow: hidden;
z-index: 3;
}
.topbar .fixed-menu {
color: red;
}
.fixed-menu {
position: fixed;
top: 20px;
right: 50px;
}
.loads-of-content {
position: relative;
overflow: hidden;
}
clip-path
is newer but is not supported by IE.