Beim Scrollen schaltet JS die Klasse .scrolled (ab ~12 px) und der Header
verdichtet sich zu Milchglas: Blur + Saturate, feine Linie, weicher Schatten. In der Bühne ist die Demo in eine
kleine scrollbare Box gepackt — einfach im Kasten nach unten scrollen. Vorbild: Bernstein, Hauszeit.
Marke
Im Kasten nach unten scrollen — der Header wird zu Milchglas.
Inhalt …
Inhalt …
Inhalt …
<div class="fx-scrollbox">
<div class="fx-glashead">
<strong>Marke</strong>
<nav aria-label="Beispiel"><a href="#">Start</a><a href="#">Leistungen</a><a href="#">Kontakt</a></nav>
</div>
<div class="fx-filler"><p>Inhalt …</p></div>
</div>
<style>
/* In echten Projekten: position:fixed/sticky am echten <header>, kein Scrollbox-Wrapper. */
.fx-scrollbox{height:200px;overflow-y:auto;position:relative}
.fx-glashead{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
padding:.85rem 1.1rem;background:transparent;border-bottom:1px solid transparent;
transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,
-webkit-backdrop-filter .3s ease,backdrop-filter .3s ease}
.fx-glashead.scrolled{background:rgba(22,22,26,.55);
-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
border-bottom-color:#2c2c34;box-shadow:0 8px 24px -18px rgba(0,0,0,.8)}
@media (prefers-reduced-motion:reduce){.fx-glashead{transition:none}}
</style>
<script>
/* Togglet .scrolled ab ~12 px. Im Projekt auf window scrollen statt auf die Box. */
document.querySelectorAll('.fx-scrollbox').forEach(function(box){
var head=box.querySelector('.fx-glashead');
box.addEventListener('scroll',function(){head.classList.toggle('scrolled',box.scrollTop>12);},{passive:true});
});
</script>