Reactjs Next.js滚动条导航栏

我试图实现一个导航栏，滚动时会产生模糊效果。 这是可行的，但是当我刷新页面时，滚动条保持在相同的位置，我不会从

window.pageYOffset

得到任何结果。这样做的结果是，我有一个透明的导航栏

我也在使用tailwindcss，但我认为这无关紧要

代码示例：

import React, { useState, useEffect } from 'react'

const Navigation: React.FC = () => {
  const [top, setTop] = useState(true);

  useEffect(() => {
    const scrollHandler = () => {
      window.pageYOffset > 20 ? setTop(false) : setTop(true)
    };
    window.addEventListener('scroll', scrollHandler);
    return () => {
      window.removeEventListener('scroll', scrollHandler);
    }
  }, [top]);

  return (
    <header className={`fixed w-full z-30 ${!top && 'bg-white dark:bg-black bg-opacity-80 dark:bg-opacity-80 backdrop-blur dark:backdrop-blur'}`}>
    </header>
  );
};

export default Navigation

import React，{useState，useffect}来自“React”
常量导航：React.FC=（）=>{
const[top，setTop]=useState（true）；
useffect（（）=>{
常量scrollHandler=（）=>{
window.pageYOffset>20？设置上限（false）：设置上限（true）
};
addEventListener（'scroll'，scrollHandler）；
return（）=>{
removeEventListener（'scroll'，scrollHandler）；
}
}，[顶部]；
返回(
);
};
导出默认导航

如果希望刷新页面时导航栏保持其模糊状态，则需要在

useffect

中显式调用

scrollHandler（）

useffect（（）=>{
常量scrollHandler=（）=>{
window.pageYOffset>20？设置上限（false）：设置上限（true）
};
addEventListener（'scroll'，scrollHandler）；
scrollHandler（）；//显式调用，以便在当前页面偏移量为'window.pageYOffset>20时导航栏变得模糊`
return（）=>{
removeEventListener（'scroll'，scrollHandler）；
}
}, []);

您还可以从

useffect

的依赖项数组中删除

top

，您只需要在安装组件时运行它