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

The behaviour you are looking for is the same as background-attachement:fixed;.

Although this solution is pretty simple and doesn't rely on JS, from a sematic point of view it shouldn't be recommended.

The point is to use 2 background images with background-attachement: fixed; and to position the link over them for interaction. It will give you the desired behaviour with a smooth color change according to the background color :

DEMO

header, article,footer,body{
    background:#fff url('http://i.imgur.com/oHIZBHL.png') no-repeat;
    background-attachment: fixed;
    background-position:right 160px top 10px;
}
body{
    padding:0 150px 1000px;
    background-color:lightgrey;
}
header,footer{
    background-image:url('http://i.imgur.com/79IWeQK.png');
    background-color:#F97D9F;
    height:125px;
}
article{
    height:500px;
}
nav a{
    position:fixed;
    top:10px; right:160px;
    width:150px; height:50px;
}