Sticky Navbar

Vorschau

Simuliert einen glasmorphischen festen Navigator mit Scrollen. Klicken Sie in der Vorschau auf die Schaltfläche, um den Scrolleffekt zu sehen.

Anwendungsfälle und Funktionen

• Landing Page/Portfolio: Der Gesichtsausdruck des Navigators ändert sich beim Scrollen und verleiht ihm ein gut gestaltetes Aussehen.

• Geeignet für dunkle Themen: Der „Hintergrundfilter: Unschärfe“ von Glassmorphism sieht auf dunklen Hintergründen besonders gut aus.

• Verwendung von „position: sticky“: Maximieren Sie die Leistung, indem Sie „position: sticky“ in CSS nutzen, anstatt sich nur auf JavaScript zu verlassen.

Design- und UX-Punkte

1. Wird beim Scrollen mit 10 Pixeln ausgelöst: Der Glasmorphismus erscheint zum neutralen Zeitpunkt.

2. Änderung der Polsterung: Von „1,25rem auf 0,75rem“ reduziert, um es kompakter zu machen und einen größeren Inhaltsbereich zu sichern.

3. Glätten mit `Übergang: Erzeugen Sie natürliche Veränderungen, indem Sie gleichzeitig die vier Eigenschaften Hintergrund, Unschärfe, Kastenschatten und Polsterung übergehen.

So passen Sie es an

Ändern Sie den Scroll-Startschwellenwert:

// früher auslösen (5px)

if (demo.scrollTop > 5) { ... }



// später auslösen (50px)

if (demo.scrollTop > 50) { ... }

Link hinzufügen:

<li><a href="#services">Service</a></li>

<li><a href="#blog">Blog</a></li>

Implementierungscode

<nav class="snav-bar" id="sticky-nav">

<div class="snav-logo">BRAND</div>

<ul class="snav-links">

  <li><a href="#">Home</a></li>

  <li><a href="#">About</a></li>

  <li><a href="#">Work</a></li>

</ul>

<button class="snav-cta">Contact</button>

</nav>



<style>
.snav-bar {

position: sticky;

top: 0;

z-index: 100;

width: 100%;

box-sizing: border-box;

padding: 1.25rem 2rem;

display: flex;

align-items: center;

justify-content: space-between;

gap: 1.5rem;

transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;

}

.snav-bar.scrolled {

background: rgba(15,23,42,0.75);

backdrop-filter: blur(16px);

box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.4);

padding: 0.75rem 2rem;

}
</style>



<script>

window.addEventListener('scroll', function() {

var nav = document.getElementById('sticky-nav');

if (window.scrollY > 10) nav.classList.add('scrolled');

else nav.classList.remove('scrolled');

});

</script>

Browserkompatibilitätsstatus

| Browser | Kompatibilitätsstatus |

|--------|-------|

| Chrom 76+ | ✅ Vollständig kompatibel |

| Firefox 103+ | ✅ Kompatibel |

| Safari 9+ | ✅ Vollständig kompatibel |

| Kante 79+ | ✅ Vollständig kompatibel |

„backdrop-filter“ wird von einigen älteren Browsern nicht unterstützt, aber ein halbtransparenter Hintergrund von „background: rgba(…)“ reicht als Fallback aus.