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

What you are looking for is clipping. This allows you to specify a rectangular region where an element is visible.

You can use:

clip: rect(auto, auto, auto, auto);

on the container to emulate overflow: hidden for the position: fixed menu, so you can crop the text as you scroll.

Note that while clip is deprecated, the new clip-path does not work with position: fixed elements, so you are stuck with clip for now.

clip requires absolute or fixed positioning, but you can easily work around that problem by placing a position: absolute element inside a position: relative container, like so:

Here is the demo:

html,
body {
  height: 100%;
  margin: 0;
  padding: 10% 5% 80% 5%;
  background-color: #eee;
  font-family: sans-serif;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  position: relative;
}
.cell.small {
  height: 25%;
}
.header,
.content,
.footer {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 4%;
  box-sizing: border-box;
  clip: rect(auto, auto, auto, auto);
}
.header,
.footer {
  background-color: #F97D9F;
}
.menu {
  position: fixed;
  font-size: 2em;
  top: 10%;
  right: 20%;
}
.white {
  color: #fff;
}
.black {}

  

    

      

        content
        
MENU
      
    
  
  

    

      

        content
        
MENU
      
    
  
  

    

      

        content
        
MENU