从0到1拆解理想画室官网头部导航：一套双态透明导航栏的设计与实现

<header class="header">

    <div class="header\_\_container">

        <!-- Logo -->

        <div class="header\_\_logo">

            <a href="/" class="header\_\_logo-link">

                <img src="/skin/img/logo-white.png" 

                     alt="理想艺术" 

                     class="header\_\_logo-img"

                     data-black="/skin/img/logo-black.png">

            </a>

        </div>

        <!-- 导航菜单 -->

        <nav class="header\_\_nav">

            <a href="/" class="header\_\_nav-link header\_\_nav-link--active">首页</a>

            <a href="/about/" class="header\_\_nav-link">关于我们</a>

            <a href="/school/" class="header\_\_nav-link">理想校园</a>

            <a href="/teacher/" class="header\_\_nav-link">师资介绍</a>

            <a href="/course/" class="header\_\_nav-link">专业课程</a>

            <a href="/news/" class="header\_\_nav-link">新闻动态</a>

            <a href="/enroll/" class="header\_\_nav-link">在线报名</a>

            <a href="/contact/" class="header\_\_nav-link">联系我们</a>

        </nav>

        <!-- 搜索框 -->

        <div class="header\_\_search">

            <form method="get" action="/search.html">

                <input type="text" name="keywords" placeholder="搜索" class="header\_\_search-input">

                <button type="submit">

                    <i class="fas fa-search header\_\_search-icon"></i>

                </button>

                <input type="hidden" name="method" value="1" />

                <input type="hidden" name="type" value="all" />

            </form>

        </div>

    </div>

</header>

/\* ===== 基础样式：顶部透明红底背景图 + 渐变遮罩 \*/

.header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    height: 80px;

    display: flex;

    align-items: center;

    background-color: #c00000;

    background-image:

        linear-gradient(135deg, 

            rgba(26,26,46,0.35) 0%,

            rgba(177,11,24,0.25) 50%,

            rgba(192,0,0,0.35) 100%),

        url('/skin/img/header-bg.jpg');

    background-size: cover;

    background-position: center;

    transition: background-color 0.3s ease, 

                box-shadow 0.3s ease, 

                background-image 0.3s ease;

}



/\* ===== 滚动后白底 \*/

.header.scrolled {

    background-image: none;

    background-color: #fff;

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

}



/\* 给 body 顶部留空，防止 fixed 定位不遮挡内容 \*/

body { padding-top: 80px; }

.header\_\_nav-link {

    color: #fff;

    font-size: 16px;

    font-weight: 500;

    position: relative;

    transition: color 0.3s ease;

}



/\* 滚动后文字变深灰 \*/

.header.scrolled .header\_\_nav-link { color: #333; }



/\* active / hover 下划线效果 \*/

.header\_\_nav-link::after {

    content: '';

    position: absolute;

    bottom: -5px;

    left: 0;

    width: 0;

    height: 2px;

    background-color: #fff;

    transition: width 0.3s ease;

}

.header\_\_nav-link--active::after { 

    width: 100%;

    background-color: #fff;

}

.header.scrolled .header\_\_nav-link--active::after {

    background-color: #a30000;

}

.header\_\_search-input {

    width: 140px;

    height: 36px;

    border: 1px solid rgba(255,255,255,0.3);

    border-radius: 18px;

    background: rgba(255,255,255,0.1);

    color: #fff;

    outline: none;

    transition: all 0.3s ease;

}

.header\_\_search-input::placeholder { 

    color: rgba(255,255,255,0.6);

}



/\* 滚动后白底 \*/

.header.scrolled .header\_\_search-input {

    border-color: #e0e0e0;

    background: #f5f5f5;

    color: #333;

}

.header.scrolled .header\_\_search-input::placeholder { 

    color: #999;

}



/\* 聚焦时展开 \*/

.header\_\_search-input:focus { 

    width: 180px; 

    border-color: #a30000;

}

(function() {

    'use strict';



    const headerEl = document.querySelector('.header');

    if (!headerEl) return;



    /\* 1. Logo 黑白切换（data-black 属性存黑色 Logo 地址

    const logoImg = headerEl.querySelector('.header\_\_logo-img');

    if (logoImg && logoImg.dataset && logoImg.dataset.black) {

        const whiteSrc = logoImg.src;

        const blackSrc = logoImg.dataset.black;



        function updateLogo() {

            logoImg.src = window.scrollY > 80 ? blackSrc : whiteSrc;

        }



        window.addEventListener('scroll', updateLogo, { passive: true });

        updateLogo();

    }



    /\* 2. Header 滚动样式切换 \*/

    function updateHeaderScroll() {

        if (window.scrollY > 80) {

            headerEl.classList.add('scrolled');

            headerEl.classList.remove('transparent');

        } else {

            headerEl.classList.remove('scrolled');

            headerEl.classList.add('transparent');

        }

    }



    window.addEventListener('scroll', updateHeaderScroll, { passive: true });

    updateHeaderScroll();



    /\* 3. 搜索框交互 \*/

    const searchIcon = headerEl.querySelector('.header\_\_search-icon');

    const searchInput = headerEl.querySelector('.header\_\_search-input');



    if (searchIcon && searchInput) {

        searchIcon.addEventListener('click', function(e) {

            e.stopPropagation();

            searchInput.focus();

        });



        searchInput.addEventListener('keydown', function(e) {

            if (e.key === 'Enter' && this.value.trim()) {

                window.location.href = '/search.html?keyword=' + encodeURIComponent(this.value.trim());

            }

        });



        document.addEventListener('click', function(e) {

            if (searchInput.value && !e.target.closest('.header\_\_search')) {

                searchInput.value = '';

            }

        });

    }

})();