59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
"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>
|
||
);
|
||
};
|