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

wn9m85ua 于 2023-01-12 发布在 React

关注(0)|答案(1)|浏览(141)

我在react中有一个标题，当滚动条位置为initial（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”？

reactjs

来源：https://stackoverflow.com/questions/75093209/how-to-make-a-header-in-react-have-a-shadow-only-on-scroll-using-tailwindcss

1条答案

按热度按时间

hof1towb1#

一个简单的解决方案是创建一个状态来检查屏幕是否滚动过，当屏幕滚动后用useEffect更新状态，如果屏幕滚动过，则在头中添加shadow类。

const [top, setTop] = useState(true);

useEffect(() => {
  const scrollHandler = () => {
    window.pageYOffset > 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`}`}>

赞(0）回复(0）举报 2023-01-12

我来回答

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

1条答案

相关问题

热门标签

最新问答