Next.js 滚动条导航栏答案

【问题标题】：Next.js scrollbar navbarNext.js 滚动条导航栏
【发布时间】：2021-04-04 15:51:33
【问题描述】：

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

【问题讨论】：

标签： reactjs typescript next.js

【解决方案1】：

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

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);
    }
}, []);

你也可以从useEffect的依赖数组中移除top，你只需要在组件挂载时运行它。

【讨论】：