Use pseudo-element to overlay a scrolling div

Question

I would like to cover a div with dynamic scrolling content with a pseudo element overlay.
The issue I have encountered is the overlay scrolls with the content, leaving any content below the fold naked.

How can I allow the overlay to remain in place as the content below it scrolls?

.wantOverlay {
  width: 200px;
  height: 100px;
  overflow-y: scroll;
  position: relative;
}

.wantOverlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(150, 150, 150, .45);
}

<div class="wantOverlay">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed est vel ante faucibus tempor nec id.</div>
  <div>Unfortunately any text past this point no longer has the overlay.</div>
  <div>This text no longer has the overlay.</div>
</div>

Answer 1

position: sticky; with negative margin-top will do the trick. Here is details about sticky https://developer.mozilla.org/tr/docs/Web/CSS/position

.wantOverlay {
  width: 200px;
  height: 100px;
  overflow-y: scroll;
  position: relative;
}

.wantOverlay::after {
  display: block;
  content: ' ';
  position: sticky;
  left: 0;
  top: 0;
  margin-top: -100%;
  width: 100%;
  height: 100%;
  background: rgba(150, 150, 150, .45);
}

<div class="wantOverlay">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed est vel ante faucibus tempor nec id.</div>
  <div>Unfortunately any text past this point no longer has the overlay.</div>
  <div>This text no longer has the overlay.</div>
</div>