如何使一个标题在反应有一个阴影只在滚动使用tailwindcss?

Question

我在react中有一个标题，我想在滚动条位置为初始值(0)时没有阴影，并且在滚动时有阴影。下面是使用tailwindCSS:

添加和不添加阴影的标题代码与影子:

<header className="sticky left-0 top-0 right-0 z-20 shadow">
...
</header>

没有影子的:

<header className="sticky left-0 top-0 right-0 z-20">
...
</header>

我如何检查滚动条是否不在其初始位置，使标题采用className "shadow"?

Answer 1

对于你的问题，一个简单的解决方案是创建一个状态来检查屏幕是否被滚动，一旦屏幕被滚动，使用useEffect更新状态，然后在屏幕被滚动时向标题添加阴影类。我是这样做的:

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

那么你的头类看起来像这样:

<header className={`sticky left-0 top-0 right-0 z-20 ${!top && `bg-white shadow-lg`}`}>