Question

我正在尝试实现一个在滚动时具有模糊效果的导航栏。这是有效的，但是当我刷新页面时，滚动条保持在相同的位置并且我没有从 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

Answer 1

如果您希望导航栏在页面刷新时保持模糊状态，则需要在 scrollHandler() 内显式调用 useEffect。

useEffect(() => {
    const scrollHandler = () => {
        window.pageYOffset > 20 ? setTop(false) : setTop(true)
    };
    window.addEventListener('scroll', scrollHandler);
    scrollHandler(); // Explicit call so that the navbar gets blurred if current page offset is `window.pageYOffset > 20`
    
    return () => {
        window.removeEventListener('scroll', scrollHandler);
    }
}, []);

您还可以从 top 的依赖项数组中删除 useEffect，您只需要在安装组件时运行它。

Next.js 滚动条导航栏

1 个答案: