"Reveal on Scroll Up" Sticky Navbar Template

This navbar uses a "reveal on scroll up" sticky effect. Hides when the user scrolls down but immediately reappears when they start scrolling up.

Get Source Code → Preview →

The "Reveal on Scroll Up" Navbar

An intelligent navbar that hides as you scroll down to read content, and immediately reappears the moment you start scrolling up. This interaction maximizes screen real estate for content consumption while keeping navigation instantly accessible when needed.

Smart Hiding & Revealing — JavaScript detects the scroll direction. The navbar smoothly slides out of view when scrolling down and slides back into view when scrolling up.
CSS Transforms for Performance — The hiding/showing effect is achieved using the highly performant CSS transform: translateY() property, which ensures a smooth animation without affecting page layout.
Visibility Threshold: The navbar will not hide until the user has scrolled past a certain point (equal to the navbar's own height), preventing it from disappearing on small, initial scrolls.
Respects User Preferences: The slide animation is automatically disabled for users with the prefers-reduced-motion accessibility setting enabled.
Clean & Self-Contained: Built with a clear JavaScript listener and modern CSS, this component is easy to understand and integrate.

Coding Best Practices

CSS custom properties (variables) are used for easy theme customization (colors, fonts).
The code is appropriately commented to explain the purpose of each section.
A tiny, efficient JavaScript snippet is used for the mobile menu toggle, as it is the most accessible and modern method (arguably superior to the older "checkbox hack").

Code

Here's the full code for the navbar template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reveal on Scroll Up Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Base Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-text-primary: #333333;
            --color-text-secondary: #777777;
            --color-primary: #1a73e8;
            --color-border: #f0f0f0;

--font-family-sans-serif: "Roboto", system-ui, -apple-system, sans-serif;
            --font-weight-medium: 500;

--navbar-height: 70px;
            --navbar-padding: 1.5rem;
            --container-width: 1140px;
            --border-radius: 6px;
            --transition-speed: 0.3s;
        }
        
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
        
        /*
        ========================================
        Global Resets & Base Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }

body { margin: 0; font-family: var(--font-family-sans-serif); background-color: #f9f9f9; }
        .content { height: 300vh; max-width: 800px; margin: 0 auto; padding: 3rem var(--navbar-padding); line-height: 1.7; }
        .content h1 { padding-top: var(--navbar-height); margin-top: 0; }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; color: var(--color-text-secondary); transition: color var(--transition-speed) ease; }
        a:hover, a:focus { color: var(--color-primary); }
        
        /*
        ========================================
        Main Navbar Structure & Animation
        ========================================
        */
        .navbar {
            /* Position sticky allows the transform to work while still being "stuck" */
            position: sticky;
            top: 0;
            z-index: 1000;
            
            height: var(--navbar-height);
            display: flex; align-items: center;
            background-color: var(--color-background);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            
            /* Core animation logic */
            transform: translateY(0);
            transition: transform var(--transition-speed) ease-in-out;
        }

/* This class, added via JS, is what hides the navbar */
        .navbar.is-hidden {
            transform: translateY(-100%);
        }

.navbar__container { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--navbar-padding); }
        .navbar__brand { font-size: 1.5rem; font-weight: var(--font-weight-medium); color: var(--color-text-primary); }

/*
        ========================================
        Mobile Menu & Toggle
        ========================================
        */
        .navbar__toggle { display: block; border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 0.25rem 0.75rem; background: transparent; cursor: pointer; }
        .navbar__toggle .bar { display: block; width: 22px; height: 2px; margin: 6px 0; background-color: var(--color-text-primary); transition: transform var(--transition-speed) ease; }
        .navbar__toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .navbar__toggle.is-active .bar:nth-child(2) { opacity: 0; }
        .navbar__toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.navbar__menu {
            display: none; flex-direction: column; position: absolute; top: 100%; left: 0;
            width: 100%; background-color: var(--color-background);
            border-bottom: 1px solid var(--color-border); z-index: 999;
        }
        .navbar__menu.is-active { display: flex; }
        .navbar__item { text-align: center; border-top: 1px solid var(--color-border); }
        .navbar__link { display: block; padding: 1.25rem; font-weight: var(--font-weight-medium); }

:is(.navbar__toggle, .navbar__link):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--border-radius); }
        
        /*
        ========================================
        Desktop Navbar Styles
        ========================================
        */
        @media (min-width: 768px) {
            .navbar__toggle { display: none; }
            .navbar__menu { display: flex; flex-direction: row; align-items: center; position: static; width: auto; background: none; border: none; }
            .navbar__list { display: flex; align-items: center; gap: 1.5rem; }
            .navbar__item { border: none; }
            .navbar__link { font-weight: var(--font-weight-medium); padding: 0.5rem 0; }
        }

/*
        ========================================
        Accessibility: Prefers Reduced Motion
        ========================================
        */
        @media (prefers-reduced-motion: reduce) {
            .navbar {
                transition: none; /* Disable the slide animation */
            }
        }
    </style>
</head>
<body>

<header class="navbar" id="main-navbar">
        <div class="navbar__container">
            <a href="#" class="navbar__brand">Article Hub</a>
            <button class="navbar__toggle" id="navbarToggle" aria-label="Toggle navigation" aria-controls="navbarMenu" aria-expanded="false">
                <span class="bar"></span><span class="bar"></span><span class="bar"></span>
            </button>
            <nav id="navbarMenu" class="navbar__menu" role="navigation">
                <ul class="navbar__list">
                    <li class="navbar__item"><a href="#" class="navbar__link">Home</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Tech</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Science</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Culture</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main class="content">
        <h1>An In-Depth Look at Modern Web Navigations</h1>
        <p>This is placeholder text designed to simulate a long article. As you begin to scroll down to read this content, you will notice that the navigation bar at the top of the screen slides up and out of view. This behavior is intentional, designed to maximize the screen space dedicated to the content you are currently focused on, providing an immersive reading experience without distractions.</p>
        <p>However, the moment you decide to navigate elsewhere and begin scrolling back up, the navigation bar will instantly reappear. This "reveal on scroll up" pattern understands your intent. Scrolling down means you're engaged with the content; scrolling up means you might be looking for a way to navigate. By responding to these intuitive user actions, the website can offer the best of both worlds: a clean reading environment and immediate access to controls when they are needed.</p>
        <p>This functionality is achieved with a small amount of JavaScript that keeps track of the page's scroll direction. It adds a CSS class to the navbar to hide it (using a smooth and performant 'transform' property) when you scroll down, and removes that class to show it when you scroll up. It's a simple but powerful technique for improving the user experience on content-rich websites.</p>
        <p>Scroll back up to see the effect...</p>
    </main>
    
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        // --- Standard Mobile Menu Toggle ---
        const navbarToggle = document.getElementById('navbarToggle');
        const navbarMenu = document.getElementById('navbarMenu');
        if (navbarToggle && navbarMenu) {
            navbarToggle.addEventListener('click', function () {
                navbarToggle.classList.toggle('is-active');
                navbarMenu.classList.toggle('is-active');
            });
        }
        
        // --- Reveal on Scroll Up Logic ---
        const mainNavbar = document.getElementById('main-navbar');
        if (mainNavbar) {
            let lastScrollY = window.scrollY;

View Output