how to blur the bottom layer when scrolling?-CodePudding

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

CodePudding user response：

Tweeter uses backdrop-filter

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

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