Sticky mask over scrollable content
This page demonstrates overlaying a mask on top of scrollable content using grid, the CSS 'position: sticky' property setting, and
grid-template-rows: minmax(0, 1fr);
.
Green mask using sticky positioning inside a container
Content which overflows and scrolls
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...