Position: fixed clipping mask for a div - html

Question

I wonder if it's possible with css to achieve a fixed position clipping mask that cuts out part of a <div>.
Like the below example, except that the .myMask should really be transparent and reveal the layer underneath .myDiv.
Doesn't have to be a sticky topbar, though that should be the easiest case if it's possible at all. But ideally it could be anywhere, fixed to the viewport.
body{
margin: 0;
}
.myMask{
position: sticky;
top: 0px;
height: 50px;
background: white;
z-index: 2;
border: 1px dashed black;
}
.myDiv{
position: relative;
z-index: 1;
background: lightblue;
padding: 10px
}
<div class="myMask"></div>
<div class="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, sem nec interdum accumsan, eros magna porttitor augue, eget porta leo lectus non turpis. Pellentesque eu molestie nisl, at efficitur diam. Aliquam erat volutpat. Nunc in urna tristique nisl hendrerit ullamcorper ut varius lectus. Duis nec sapien semper, cursus enim lacinia, eleifend lacus. Praesent in odio eget tortor pretium laoreet. Praesent sit amet ante quis tellus aliquet interdum ut vitae sem. Aliquam viverra, ligula non consequat maximus, metus quam tincidunt tortor, quis finibus ipsum est sit amet magna. Pellentesque egestas lectus vitae felis mollis, eget ornare ipsum aliquam. Nullam non dui mollis, pulvinar velit vitae, tincidunt leo. Nulla facilisi. Praesent ut tellus eros. Mauris tempor turpis ut lorem pellentesque euismod hendrerit ut velit.
Nam mollis sed nibh et congue. Sed in sagittis elit. Quisque placerat augue vel malesuada fringilla. Donec sit amet faucibus lectus. Fusce faucibus dolor neque, porttitor interdum felis pellentesque malesuada. Nulla elementum dictum elementum. Proin semper, tortor sit amet porttitor consectetur, nisl nibh pellentesque elit, posuere vehicula leo eros vel odio.
Sed in massa faucibus urna vehicula facilisis. Quisque rutrum bibendum libero, quis aliquet urna congue ac. Curabitur aliquet porta aliquam. Sed volutpat hendrerit ligula nec efficitur. Mauris ullamcorper lacinia est, sit amet aliquet nunc efficitur sit amet. Nulla lacinia vehicula urna, quis iaculis leo aliquam quis. Sed feugiat suscipit nunc, et lobortis neque placerat eu. Donec interdum tincidunt tincidunt. Sed metus neque, congue non orci eget, pretium pellentesque tortor. Aenean quis pulvinar mi. Nullam eu nulla purus.
Etiam rhoncus tellus sodales tempus accumsan. Morbi sed feugiat sem, in vestibulum risus. Duis pharetra vulputate dolor, ut posuere lectus vestibulum non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eu placerat neque. Phasellus vel ante eget felis tempus interdum vel ac tortor. Donec et commodo nunc. Nullam maximus elit sed enim dictum, a suscipit ante ultricies. Proin ut mollis lorem, nec sodales eros.
Duis bibendum varius nunc id semper. Cras lacinia elit quis libero dictum accumsan. In hac habitasse platea dictumst. Proin egestas eu leo non hendrerit. Morbi ac ex eu nibh tincidunt pulvinar. Proin sollicitudin dignissim tincidunt. Nullam ultricies metus urna, in varius arcu accumsan sed. Suspendisse elementum urna risus, at tincidunt tortor bibendum sed. Proin dapibus commodo massa, ut eleifend odio hendrerit a. Quisque maximus magna non quam dapibus, in consectetur libero rutrum. Maecenas sed dapibus ante, eu sodales orci. Praesent tincidunt aliquet ligula. Nulla sagittis turpis id dui hendrerit aliquam. Mauris quis erat velit. Vivamus ipsum orci, suscipit in ornare ut, suscipit placerat justo.</div>

Answer 1

One idea is to consider background coloration for the text then we can rely on background-attachment:fixed
Unfortunately the below doesn't work on Firefox due to a known bug
body {
margin: 0;
background:linear-gradient(60deg,red,blue);
}
.myDiv {
background:
linear-gradient(#000,#000), /* color of the text */
linear-gradient(lightblue,lightblue); /* color of the background*/
background-position:0 50px; /* push for background by 50px from the top */
background-repeat:no-repeat; /* don't repeat !!*/
-webkit-background-clip:
text,
padding-box;
background-clip:
text,
padding-box;
background-attachment:fixed; /* make background fixed to scroll */
/* Remove default coloration of text*/
-webkit-text-fill-color: transparent;
color:transparent;
/**/
padding: 60px 10px 10px;
font-size:25px;
}
<div class="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, sem nec interdum accumsan, eros magna porttitor augue, eget porta leo lectus non turpis. Pellentesque eu molestie nisl, at efficitur diam. Aliquam erat volutpat. Nunc in urna tristique
nisl hendrerit ullamcorper ut varius lectus. Duis nec sapien semper, cursus enim lacinia, eleifend lacus. Praesent in odio eget tortor pretium laoreet. Praesent sit amet ante quis tellus aliquet interdum ut vitae sem. Aliquam viverra, ligula non consequat
maximus, metus quam tincidunt tortor, quis finibus ipsum est sit amet magna. Pellentesque egestas lectus vitae felis mollis, eget ornare ipsum aliquam. Nullam non dui mollis, pulvinar velit vitae, tincidunt leo. Nulla facilisi. Praesent ut tellus eros.
Mauris tempor turpis ut lorem pellentesque euismod hendrerit ut velit. Nam mollis sed nibh et congue. Sed in sagittis elit. Quisque placerat augue vel malesuada fringilla. Donec sit amet faucibus lectus. Fusce faucibus dolor neque, porttitor interdum
felis pellentesque malesuada. Nulla elementum dictum elementum. Proin semper, tortor sit amet porttitor consectetur, nisl nibh pellentesque elit, posuere vehicula leo eros vel odio. Sed in massa faucibus urna vehicula facilisis. Quisque rutrum bibendum
libero, quis aliquet urna congue ac. Curabitur aliquet porta aliquam. Sed volutpat hendrerit ligula nec efficitur. Mauris ullamcorper lacinia est, sit amet aliquet nunc efficitur sit amet. Nulla lacinia vehicula urna, quis iaculis leo aliquam quis.
Sed feugiat suscipit nunc, et lobortis neque placerat eu. Donec interdum tincidunt tincidunt. Sed metus neque, congue non orci eget, pretium pellentesque tortor. Aenean quis pulvinar mi. Nullam eu nulla purus. Etiam rhoncus tellus sodales tempus accumsan.
Morbi sed feugiat sem, in vestibulum risus. Duis pharetra vulputate dolor, ut posuere lectus vestibulum non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eu placerat neque. Phasellus vel ante
eget felis tempus interdum vel ac tortor. Donec et commodo nunc. Nullam maximus elit sed enim dictum, a suscipit ante ultricies. Proin ut mollis lorem, nec sodales eros. Duis bibendum varius nunc id semper. Cras lacinia elit quis libero dictum accumsan.
In hac habitasse platea dictumst. Proin egestas eu leo non hendrerit. Morbi ac ex eu nibh tincidunt pulvinar. Proin sollicitudin dignissim tincidunt. Nullam ultricies metus urna, in varius arcu accumsan sed. Suspendisse elementum urna risus, at tincidunt
tortor bibendum sed. Proin dapibus commodo massa, ut eleifend odio hendrerit a. Quisque maximus magna non quam dapibus, in consectetur libero rutrum. Maecenas sed dapibus ante, eu sodales orci. Praesent tincidunt aliquet ligula. Nulla sagittis turpis
id dui hendrerit aliquam. Mauris quis erat velit. Vivamus ipsum orci, suscipit in ornare ut, suscipit placerat justo.</div>
For firefox you can consider another wrapper:
body {
margin: 0;
background:linear-gradient(64deg,red,blue);
}
.myDiv {
background:linear-gradient(lightblue,lightblue);
background-position:0 50px;
background-attachment:fixed;
background-repeat:no-repeat;
padding: 60px 10px 10px;
font-size:25px;
}
.myDiv > div {
background:linear-gradient(#000,#000);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color: transparent;
color:transparent;
background-attachment:inherit;
background-position:inherit;
background-repeat:inherit;
}
<div class="myDiv">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, sem nec interdum accumsan, eros magna porttitor augue, eget porta leo lectus non turpis. Pellentesque eu molestie nisl, at efficitur diam. Aliquam erat volutpat. Nunc in urna tristique
nisl hendrerit ullamcorper ut varius lectus. Duis nec sapien semper, cursus enim lacinia, eleifend lacus. Praesent in odio eget tortor pretium laoreet. Praesent sit amet ante quis tellus aliquet interdum ut vitae sem. Aliquam viverra, ligula non consequat
maximus, metus quam tincidunt tortor, quis finibus ipsum est sit amet magna. Pellentesque egestas lectus vitae felis mollis, eget ornare ipsum aliquam. Nullam non dui mollis, pulvinar velit vitae, tincidunt leo. Nulla facilisi. Praesent ut tellus eros.
Mauris tempor turpis ut lorem pellentesque euismod hendrerit ut velit. Nam mollis sed nibh et congue. Sed in sagittis elit. Quisque placerat augue vel malesuada fringilla. Donec sit amet faucibus lectus. Fusce faucibus dolor neque, porttitor interdum
felis pellentesque malesuada. Nulla elementum dictum elementum. Proin semper, tortor sit amet porttitor consectetur, nisl nibh pellentesque elit, posuere vehicula leo eros vel odio. Sed in massa faucibus urna vehicula facilisis. Quisque rutrum bibendum
libero, quis aliquet urna congue ac. Curabitur aliquet porta aliquam. Sed volutpat hendrerit ligula nec efficitur. Mauris ullamcorper lacinia est, sit amet aliquet nunc efficitur sit amet. Nulla lacinia vehicula urna, quis iaculis leo aliquam quis.
Sed feugiat suscipit nunc, et lobortis neque placerat eu. Donec interdum tincidunt tincidunt. Sed metus neque, congue non orci eget, pretium pellentesque tortor. Aenean quis pulvinar mi. Nullam eu nulla purus. Etiam rhoncus tellus sodales tempus accumsan.
Morbi sed feugiat sem, in vestibulum risus. Duis pharetra vulputate dolor, ut posuere lectus vestibulum non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eu placerat neque. Phasellus vel ante
eget felis tempus interdum vel ac tortor. Donec et commodo nunc. Nullam maximus elit sed enim dictum, a suscipit ante ultricies. Proin ut mollis lorem, nec sodales eros. Duis bibendum varius nunc id semper. Cras lacinia elit quis libero dictum accumsan.
In hac habitasse platea dictumst. Proin egestas eu leo non hendrerit. Morbi ac ex eu nibh tincidunt pulvinar. Proin sollicitudin dignissim tincidunt. Nullam ultricies metus urna, in varius arcu accumsan sed. Suspendisse elementum urna risus, at tincidunt
tortor bibendum sed. Proin dapibus commodo massa, ut eleifend odio hendrerit a. Quisque maximus magna non quam dapibus, in consectetur libero rutrum. Maecenas sed dapibus ante, eu sodales orci. Praesent tincidunt aliquet ligula. Nulla sagittis turpis
id dui hendrerit aliquam. Mauris quis erat velit. Vivamus ipsum orci, suscipit in ornare ut, suscipit placerat justo.</div></div>