Fija el header y anima sus propiedades al hacer scroll.

PHOTO EMBED

Wed Aug 16 2023 14:59:22 GMT+0000 (Coordinated Universal Time)

Saved by @rstringa #animation-timeline 

header {
  backdrop-filter:blur(5px);
  position:sticky;
  top:0px;
  animation: adjust-header linear both;
  animation-timeline: scroll();
  animation-range:0 200px;
}
@keyframes adjust-header{
  to {
    background:rgba(0,0,0,.3);
    font-size:12px;
    height:24px;
  }
}
content_copyCOPY