使用React实现滚动时动态改变导航栏背景色

/* 引入外部字体 */
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext");

body {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  background-color: #fff;
  overflow-x: hidden;
  transition: all 200ms linear;
  /* 增加body高度以便滚动 */
  height: 200vh;
}

/* 导航栏基础样式 */
.navigation-wrap {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; /* 确保背景色变化有过渡效果 */
}

.start-header {
  opacity: 1;
  transform: translateY(0);
  padding: 20px 0;
  box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.2);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  background-color: transparent; /* 初始透明背景 */
}

/* 滚动后的导航栏样式 */
.bg-dark {
  background-color: #343a40 !important; /* 深色背景 */
  color: #fff; /* 调整文字颜色以适应深色背景 */
  box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15); /* 滚动后更小的阴影 */
  padding: 10px 0; /* 滚动后缩小高度 */
}

/* 导航链接在深色背景下的样式调整 */
.bg-dark .nav-link {
    color: #fff !important;
}

.bg-dark .nav-item:hover .nav-link {
    color: #0087ff !important;
}

/* 其他原有CSS样式保持不变，此处省略 */
/* ... (省略了问题中提供的其他CSS代码) ... */

import React, { useState, useEffect } from 'react';
// 假设您已经引入了必要的Bootstrap组件或样式
// import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
// 或者直接使用HTML结构

function DynamicNavbar() {
  // 使用useState来管理导航栏的CSS类名
  const [navClass, setNavClass] = useState('navigation-wrap start-header');

  useEffect(() => {
    // 定义滚动处理函数
    const handleScroll = () => {
      // 当垂直滚动距离超过50px时，添加bg-dark类
      if (window.scrollY > 50) {
        setNavClass('navigation-wrap start-header bg-dark');
      } else {
        // 否则，恢复初始类名
        setNavClass('navigation-wrap start-header');
      }
    };

    // 添加滚动事件监听器
    window.addEventListener('scroll', handleScroll);

    // 组件卸载时移除事件监听器，防止内存泄漏
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []); // 空数组作为依赖项，确保只在组件挂载和卸载时执行

  return (
    <div id="myNav" className={navClass}>
      <div className="container">
        <div className="row">
          <div className="col-12">
            <nav className="navbar navbar-expand-md navbar-light">
              {/* <a className="navbar-brand" href="#">Your Logo</a> */}
              <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
              </button>

              <div className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav ml-auto py-4 py-md-0">
                  <li className="nav-item pl-4 pl-md-0 ml-0 ml-md-4 active">
                    <a className="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                      Home
                    </a>
                    <div className="dropdown-menu">
                      <a className="dropdown-item" href="#">Action</a>
                      <a className="dropdown-item" href="#">Another action</a>
                      <a className="dropdown-item" href="#">Something else here</a>
                    </div>
                  </li>
                  <li className="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
                    {/* 请将Link替换为您的路由Link组件，例如来自react-router-dom */}
                    <a className="nav-link" href="/blogs">Blogs</a>
                  </li>
                  <li className="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
                    <a className="nav-link" href="/contact">Contact</a>
                  </li>
                  {/* ... 其他导航项 ... */}
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>
  );
}

export default DynamicNavbar;