monorepo/apps/web/src/app/_components/header/index.tsx

"use client";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";

import { HeaderNav } from "./headerNav";
import { HeaderTools } from "./headerTools";

//导航

export const Header = () => {
  const [opacity, setOpacity] = useState(1); // 初始透明度为1（完全不透明）

  useEffect(() => {
    const handleScroll = () => {
      // 根据滚动位置计算透明度
      const newOpacity = 1 - Math.min(window.scrollY / 200, 1);
      setOpacity(newOpacity);
    };

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

    // 移除滚动事件监听器
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);
  return (
    <header
      className=" tw-py-5 lg:tw-px-40 tw-fixed tw-top-0 tw-left-0 tw-w-full tw-z-50"
      style={{
        backgroundColor: `rgba(248 ,250 ,252, ${opacity})`, // 使用rgba格式设置背景色和透明度
        transition: "background-color 0.3s ease", // 添加过渡效果
      }}
    >
      <div className="tw-flex tw-justify-between tw-items-center ">
        <div className=" tw-flex-1 tw-flex  tw-flex-row tw-ml-8 ">
          <Link href={"/"}>
            <Image
              src={"/logo.png"}
              alt="logo"
              width={174}
              height={40}
              priority
            ></Image>
          </Link>
        </div>
        <div className=" tw-flex tw-flex-auto tw-flex-col tw-w-3/5 tw-justify-center tw-items-center ">
          <HeaderNav></HeaderNav>
        </div>
        <div className=" tw-flex-1 tw-flex  tw-flex-row-reverse tw-mr-8 ">
          <HeaderTools></HeaderTools>
        </div>
      </div>
    </header>
  );
};