Attempting to achieve: CSS change color on scroll / cut text - overflow z-index This code snippet uses the clip property to change the color of a button when scrolling. The goal is to make it change color as you move from the header to the body, but it's not working for me.
body {
background:#F7FE2E;
margin: 0;
}
#header{
padding:200px 50px;
background-color: #6495ED;
}
/*HERE IS THE HEADER AND BODY CLIP*/
#header,
#content {
clip: rect(auto, auto, auto, auto);
box-sizing: border-box;
}
/********** MENU ***********/
.menu{
top: 15px;
right: 40px;
font-size: 16px;
position:fixed;
}
.black {
color: #000000;
}
.white {
color: #FFFFFF;
}<div id="wrapper">
<div id="header">
<!--HERE IS THE FIXED MENU WHITE-->
<div class="menu white">MENU</div>
</div>
<div id="content">
<!--HERE IS THE FIXED MENU BLACK-->
<div class="menu black">MENU</div>
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>...
</div>
</div> Why isn't this working as expected?