如何使用tailwindcss使react中的标题仅在滚动时有阴影？

Question

我有一个反应标题，我希望当滚动条位置初始（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`}`}>