Sticky Blur Navbar

<!--
  Sticky + translucent, and the border only appears once the page has moved.
  At the top of a page the bar and the hero are one surface, so a hairline
  there is a seam with nothing on either side of it; the moment content slides
  underneath, that same hairline is what stops the bar dissolving into it.

  The blur is a progressive enhancement - the background colour is opaque
  enough on its own that a browser without backdrop-filter still renders a
  legible bar rather than text over content.
-->
<header class="navsticky" data-scrolled="false">
  <nav class="navsticky__inner" aria-label="Main">
    <a class="navsticky__brand" href="/">Adysre</a>

    <ul class="navsticky__links">
      <li><a class="navsticky__link" href="/features">Features</a></li>
      <li><a class="navsticky__link" href="/pricing">Pricing</a></li>
      <li><a class="navsticky__link" href="/blog">Blog</a></li>
    </ul>

    <a class="navsticky__cta" href="/signup">Get started</a>
  </nav>
</header>

<script>
  document.querySelectorAll('.navsticky').forEach(function (bar) {
    function update() {
      bar.dataset.scrolled = String(window.scrollY > 8);
    }
    update();
    // passive: this listener never calls preventDefault, and saying so keeps it
    // off the scrolling critical path.
    window.addEventListener('scroll', update, { passive: true });
  });
</script>