how to blur the bottom layer when scrolling?

Issue

The top bar of my app is fixed. When the main page scrolls, the top bar will cover it. How to get the blurring effect of the main page when the top bar is on top of it?

twitter.com has this effect

Solution

Tweeter uses backdrop-filter

.navbar
{
  position: sticky;
  top: 0;
  height: 3em;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

<div class="content">
  <h1 class="navbar">My navbar</h1>
  <h3>some text</h3>
  <img src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w1024-h1024-n-l50-sg-rj">
</div>

Answered By - vanowm