Change On Scroll Sticky Navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change on Scroll Sticky Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Base Theme)
        ========================================
        */
        :root {
            /* Scrolled (solid) state colors */
            --color-solid-bg: #ffffff;
            --color-solid-text: #333333;
            --color-solid-link: #666666;
            --color-solid-shadow: rgba(0, 0, 0, 0.1);

/* Transparent state colors */
            --color-transparent-text: #ffffff;
            --color-transparent-shadow: rgba(0, 0, 0, 0.5);

--font-family-sans-serif: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            --font-weight-bold: 600;
            --navbar-height: 80px;
            --container-width: 1200px;
            --transition-speed: 0.4s;
            --border-radius: 6px;
        }

/*
        ========================================
        Global Resets & Base Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; transition: color var(--transition-speed) ease; }
        
        /*
        ========================================
        Hero & Content Sections
        ========================================
        */
        .hero-section {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh; /* Full viewport height */
            color: var(--color-transparent-text);
            text-align: center;
            background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=2072&auto=format&fit=crop');
            background-size: cover;
            background-position: center center;
        }
        .hero-section h1 { font-size: 3rem; text-shadow: 0 2px 4px var(--color-transparent-shadow); }

.content-section {
            padding: 3rem 1.5rem;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.7;
        }

/*
        ========================================
        Navbar Structure & States
        ========================================
        */
        .navbar {
            /* Starts fixed to the top */
            position: fixed; top: 0; left: 0; width: 100%;
            height: var(--navbar-height);
            display: flex; align-items: center;
            z-index: 1000;
            
            /* Initial (Transparent) State */
            background-color: transparent;
            color: var(--color-transparent-text);
            box-shadow: none;

/* Properties to be animated */
            transition: background-color var(--transition-speed) ease, 
                        box-shadow var(--transition-speed) ease;
        }

.navbar__container {
            display: flex; justify-content: space-between; align-items: center;
            width: 100%; max-width: var(--container-width);
            margin: 0 auto; padding: 0 1.5rem;
        }

.navbar__brand,
        .navbar__link {
            text-shadow: 0 1px 3px var(--color-transparent-shadow);
            color: var(--color-transparent-text);
            font-weight: var(--font-weight-bold);
            transition: color var(--transition-speed) ease, text-shadow var(--transition-speed) ease;
        }

.navbar__brand { font-size: 1.75rem; }
        .navbar__toggle .bar { background-color: var(--color-transparent-text); transition: background-color var(--transition-speed) ease; }

/* Scrolled (Solid) State */
        .navbar.is-scrolled {
            background-color: var(--color-solid-bg);
            box-shadow: 0 2px 10px var(--color-solid-shadow);
        }

.navbar.is-scrolled .navbar__brand,
        .navbar.is-scrolled .navbar__link {
            color: var(--color-solid-text);
            text-shadow: none;
        }
        
        .navbar.is-scrolled .navbar__link {
             color: var(--color-solid-link);
        }

.navbar.is-scrolled .navbar__brand { color: var(--color-solid-text); }
        .navbar.is-scrolled .navbar__toggle .bar { background-color: var(--color-solid-text); }
        .navbar.is-scrolled .navbar__link:hover { color: var(--color-solid-text); }
        
        /* Mobile Menu */
        .navbar__toggle { display: block; border: none; padding: 0.5rem; background: transparent; cursor: pointer; }
        .navbar__toggle .bar { display: block; width: 25px; height: 3px; margin: 5px 0; border-radius: 2px; }

.navbar__menu {
            display: none; flex-direction: column; position: absolute; top: var(--navbar-height); left: 0;
            width: 100%;
            /* The mobile menu is always solid for readability */
            background-color: var(--color-solid-bg);
            box-shadow: 0 8px 16px var(--color-solid-shadow);
        }
        
        /* The mobile links are always in the 'solid' text color */
        .navbar__menu .navbar__link {
            color: var(--color-solid-link); text-shadow: none;
        }
        
        .navbar__menu.is-active { display: flex; }
        .navbar__item { text-align: center; border-top: 1px solid var(--color-solid-shadow); }
        .navbar__item .navbar__link { display: block; padding: 1.25rem; }

@media (min-width: 768px) {
            .navbar__toggle { display: none; }
            .navbar__menu { display: flex; flex-direction: row; align-items: center; position: static; width: auto; background: none; box-shadow: none; }
            .navbar__list { display: flex; align-items: center; gap: 2rem; }
            .navbar__item { border-top: none; }
            .navbar__item .navbar__link { padding: 0.5rem 0; }
        }
    </style>
</head>
<body>

<header class="navbar" id="main-navbar">
        <div class="navbar__container">
            <a href="#" class="navbar__brand">Overlay</a>
            <button class="navbar__toggle" id="navbarToggle" aria-label="Toggle navigation">
                <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">Features</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Pricing</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Login</a></li>
                </ul>
            </nav>
        </div>
    </header>

<div class="hero-section">
        <h1>An Impressive Headline</h1>
    </div>

<main class="content-section">
        <h2>Content Starts Here</h2>
        <p>As you scroll down from the hero section, you will see the navigation bar above change from transparent to a solid white background with a shadow. This makes the navigation links clear and readable against this light-colored content area.</p>
        <p>This effect is achieved by using JavaScript to add a special CSS class (e.g., 'is-scrolled') to the navbar element once the user has scrolled a certain distance down the page. The CSS then uses smooth transitions to animate the changes to properties like 'background-color' and 'color'.</p>
    </main>

// --- Change Navbar on Scroll ---
        const mainNavbar = document.getElementById('main-navbar');
        // A threshold of 10 means the change happens almost immediately after scrolling
        const scrollThreshold = 10; 
        
        if (mainNavbar) {
            window.addEventListener('scroll', () => {
                // Use toggle with the second argument for clean add/remove logic
                mainNavbar.classList.toggle('is-scrolled', window.scrollY > scrollThreshold);
            });
        }
    });
    </script>
</body>
</html>