Hide on Scroll Navbar — Free HTML CSS JS Auto-Hiding Navigation Snippet

<nav class="navbar" id="navbar">
  <span class="brand">Acme Inc.</span>
  <div class="nav-links">
    <a href="#">Product</a>
    <a href="#">Pricing</a>
    <a href="#">Docs</a>
    <a href="#" class="cta">Sign up</a>
  </div>
</nav>

<div class="page-content">
  <div class="hero">
    <h1>Scroll down to test the navbar</h1>
    <p>Scroll down and the navbar slides up out of view. Scroll back up — even slightly — and it slides back in immediately.</p>
  </div>
  <section class="block"><h2>Section One</h2><p>Hiding the navbar on scroll-down gives long-form content more vertical space without removing navigation entirely.</p></section>
  <section class="block alt"><h2>Section Two</h2><p>Reversing direction — even by a few pixels — brings the bar back immediately, so it's never more than one scroll away.</p></section>
  <section class="block"><h2>Section Three</h2><p>This pattern is common on blogs, docs sites, and marketing pages where the reader spends most of their time scrolling down.</p></section>
  <section class="block alt"><h2>Section Four</h2><p>Combine it with a shrinking logo or condensed header state for an even more compact scrolled-down view.</p></section>
</div>

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; }

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  z-index: 20;
  transform: translateY(0);
  transition: transform 0.25s ease;
}
/* Sliding the navbar up by its own height hides it completely; a matching
   0 restores it. Only this one property ever changes. */
.navbar.hidden { transform: translateY(-100%); }

.brand { font-weight: 700; font-size: 15px; color: #1e293b; }

.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
}
.nav-links a:hover { color: #1e293b; }
.nav-links a.cta {
  background: #6366f1;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
}
.nav-links a.cta:hover { background: #4f46e5; }

.page-content { padding-top: 60px; background: #f8fafc; }

.hero { padding: 70px 24px; text-align: center; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.hero h1 { font-size: 24px; margin: 0 0 10px; }
.hero p { font-size: 14px; opacity: 0.9; max-width: 460px; margin: 0 auto; line-height: 1.6; }

.block { padding: 80px 24px; background: #fff; }
.block.alt { background: #f8fafc; }
.block h2 { font-size: 20px; color: #1e293b; margin: 0 0 10px; max-width: 560px; margin-inline: auto; }
.block p { font-size: 14px; color: #64748b; line-height: 1.7; max-width: 560px; margin: 0 auto; }

const navbar = document.getElementById('navbar');
let lastScrollY = window.scrollY;
let ticking = false;

// A minimum scroll delta prevents the navbar from flickering on tiny,
// jittery scroll deltas (e.g. from a trackpad's momentum scrolling).
const MIN_SCROLL_DELTA = 8;
const REVEAL_THRESHOLD = 80;

function handleScroll() {
  const currentY = window.scrollY;
  const delta = currentY - lastScrollY;

  if (Math.abs(delta) < MIN_SCROLL_DELTA) {
    ticking = false;
    return;
  }

  if (currentY < REVEAL_THRESHOLD) {
    // Always show the navbar near the very top of the page.
    navbar.classList.remove('hidden');
  } else if (delta > 0) {
    // Scrolling down -> hide.
    navbar.classList.add('hidden');
  } else {
    // Scrolling up -> reveal immediately.
    navbar.classList.remove('hidden');
  }

  lastScrollY = currentY;
  ticking = false;
}

window.addEventListener('scroll', () => {
  if (!ticking) {
    // requestAnimationFrame batches the check to once per rendered frame,
    // instead of running handleScroll on every single scroll event.
    requestAnimationFrame(handleScroll);
    ticking = true;
  }
});