Reveal On Scroll Up Sticky Navbar

<!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;