Позиция: фиксированная маска обрезки для div

Question

Интересно, возможно ли с css добиться фиксированной позиции обтравочной маски, которая вырезает часть <div>. Как в приведенном ниже примере, за исключением того, что .myMask должен быть действительно прозрачным и открывать слой под ним .myDiv.

Не обязательно быть липкой верхней панелью, хотя это должен быть самый простой случай, если это возможно вообще. Но в идеале это может быть где угодно, закрепленное за окном просмотра.

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

Одна из идей - рассмотреть возможность окраски фона для текста, тогда мы можем полагаться на background-attachment:fixed

К сожалению, приведенное ниже не работает на Firefox из-за известной ошибки

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>

Для firefox можно рассмотреть другую оболочку:

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>