floating-header

Навігація·Шаблон: Consulo Creative Business Consulting Template·Складність анімації: subtle·Адаптивний: Так

Файли-джерела

index.htmlsticky-header header.header-1.header-floating

Бібліотеки

bootstrap

Summary

A translucent floating header that sits visually inside the hero slider with white logo and white nav text, then auto-hides on scroll-down and reappears on scroll-up via a custom <sticky-header> Web Component. On mobile it collapses into a drawer-menu opened by a custom <drawer-opener> element.

HTML structure (minimal)

<sticky-header data-sticky-type="always">
  <header class="header-1 header-floating">
    <div class="container-fluid">
      <div class="header-grid">
        <a class="header-logo" href="index.html"><img src="logo-white.png" /></a>
        <drawer-menu>
          <nav class="header-nav drawer-menu">
            <ul class="nav-main list-unstyled">
              <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
              <li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
              <li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
            </ul>
          </nav>
        </drawer-menu>
        <div class="header-buttons">
          <a class="button button--secondary" href="contact.html">Free Consultation</a>
        </div>
      </div>
    </div>
  </header>
</sticky-header>

Key SCSS tokens

.header-1 {
  position: relative;
  z-index: 50;
  --color-foreground: rgba(255,255,255,1);
  padding: 24px 0;
}
.header-1.header-floating:hover,
.header-1.header-sticky.scrolled-past-header {
  background-color: rgba(255,255,255,0.95);
  --color-foreground: rgba(28,37,57,1);
  backdrop-filter: blur(8px);
}
.header-floating {
  position: absolute;
  inset-inline: 0;
}

Animation logic

class StickyHeader extends HTMLElement {
  connectedCallback() {
    this.header = document.querySelector("header");
    if (this.getAttribute("data-sticky-type") === "always") {
      this.header.classList.add("header-sticky");
    }
    window.addEventListener("scroll", this.onScroll.bind(this));
  }
  onScroll() {
    const scrollTop = window.pageYOffset;
    if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
      this.header.classList.add("scrolled-past-header");
      requestAnimationFrame(this.hide.bind(this));
    } else if (scrollTop < this.currentScrollTop) {
      requestAnimationFrame(this.reveal.bind(this));
    }
    this.currentScrollTop = scrollTop;
  }
}
customElements.define("sticky-header", StickyHeader);

Notable details

The component uses an IntersectionObserver to cache the original header bounds once on mount, so the scroll handler avoids getBoundingClientRect per frame.
Two visual modes layered: .header-floating is fully transparent over the hero, .header-sticky.scrolled-past-header repaints opaque white with backdrop-blur — both via class swaps, no inline styles.
All scroll work runs inside requestAnimationFrame which keeps the hide/reveal jitter-free at 60fps.

Use when

B2B / agency landing pages where the header should disappear during reading and reappear on intent-to-navigate.
Fullscreen photo heroes where the navbar needs to stay readable over imagery without darkening it.
You want a hide-on-scroll behavior without pulling Headroom.js or GSAP.

Caveats

The drawer-menu open/close lock relies on a .scroll-lock class on <html> — make sure your global CSS still respects it if you customize.
The data-sticky-type="always" mode disables the hide-on-scroll-down branch; switch to "on-scroll" if you need that variant.