如何实现滚动时变色的HTML导航菜单栏（附CSS/JS方案）

下面是用HTML、CSS和JavaScript实现初始透明、滚动时变色的导航栏方案，步骤清晰可直接复用：

HTML 结构 #

先搭建基础页面框架，包含导航栏、顶部背景区和足够长的内容区（用于触发滚动）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动变色导航栏</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav id="navbar">
        <div class="nav-container">
            <a href="#" class="logo">网站Logo</a>
            <ul class="nav-menu">
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </div>
    </nav>

    <section class="hero">
        <h1>欢迎访问我们的网站</h1>
    </section>

    <section class="content">
        <h2>内容区域</h2>
        <p>这里是页面的主要内容，需要足够长才能触发滚动效果...</p>
        <p>这里是页面的主要内容，需要足够长才能触发滚动效果...</p>
        <p>这里是页面的主要内容，需要足够长才能触发滚动效果...</p>
        <p>这里是页面的主要内容，需要足够长才能触发滚动效果...</p>
        <p>这里是页面的主要内容，需要足够长才能触发滚动效果...</p>
        <p>这里是页面的主要内容，需要足够长才能触发滚动效果...</p>
        <p>这里是页面的主要内容，需要足够长才能触发滚动效果...</p>
        <p>这里是页面的主要内容，需要足够长才能触发滚动效果...</p>
        <p>这里是页面的主要内容，需要足够长才能触发滚动效果...</p>
        <p>这里是页面的主要内容，需要足够长才能触发滚动效果...</p>
    </section>

    <script src="script.js"></script>
</body>
</html>

CSS 样式 #

设置导航栏初始透明状态、滚动后的样式，以及页面其他区域的基础样式：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 导航栏基础样式：透明、固定顶部 */
#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1rem 0;
    transition: all 0.3s ease; /* 平滑过渡动画 */
    z-index: 1000; /* 确保导航栏在最上层 */
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

.logo {
    color: #fff;
    font-size: 1.5rem;
    text-decoration: none;
    font-weight: bold;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

/* 滚动后的导航栏样式：白色背景+阴影 */
#navbar.scrolled {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#navbar.scrolled .logo,
#navbar.scrolled .nav-menu a {
    color: #333; /* 文字切换为深色 */
}

/* 顶部背景图区域：占满视口高度 */
.hero {
    height: 100vh;
    background: url('your-background-image.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
}

/* 内容区域：确保足够高度触发滚动 */
.content {
    padding: 5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    color: #333;
    line-height: 1.6;
}

.content h2 {
    margin-bottom: 2rem;
    font-size: 2rem;
}

JavaScript 逻辑 #

监听页面滚动事件，根据滚动距离切换导航栏样式：

const navbar = document.getElementById('navbar');

window.addEventListener('scroll', () => {
    // 滚动距离超过100px时，添加scrolled类触发样式变化
    if (window.scrollY > 100) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

关键说明 #

• 导航栏使用position: fixed固定在页面顶部，初始无背景色，文字为白色，与顶部背景图自然融合
• 通过transition属性实现样式切换的平滑过渡，避免生硬变化
• 可根据需求调整滚动触发阈值（比如把100改成其他数值），或修改滚动后的背景色、文字颜色等样式
• 替换your-background-image.jpg为实际的背景图路径即可适配自己的网站

内容的提问来源于stack exchange，提问作者user20107962