带有 React Nextjs 的粘性导航栏答案

【问题标题】：Sticky navbar with React Nextjs带有 React Nextjs 的粘性导航栏
【发布时间】：2021-05-18 18:40:34
【问题描述】：

我正在尝试使用 nextjs 设置一个粘性导航栏，但生成的导航栏无法正常工作。谁能帮忙看看下面的代码？

import React, { useEffect } from 'react'
import styles from './navbar.module.css'

const Navbar = () => {
    const [scrolled, setScrolled] = React.useState(false);

    const handleScroll = () => {
        const offset = window.scrollY;

        if (offset > 200) {
            setScrolled(true);
        }
        else {
            setScrolled(false);
        }
    }
    useEffect(() => {
        window.addEventListener('scroll', handleScroll)
    })


    return (
        <div className={scrolled ? styles.scrolled : styles.navbar}>
            <ul className={styles.ul}>
                Something
            </ul>
            Navbar
        </div>
    )

};

export default Navbar;

【问题讨论】：

您所说的“没有按应有的方式工作”是什么意思？你能描述一下你不想发生的事情，或者你想要的事情没有发生吗？

标签： javascript reactjs next.js navbar

【解决方案1】：

如果您想要一个粘性导航栏，您可以使用纯 CSS 和 position: sticky 来实现，如下所示：

header, nav, main {
  padding: 1.7rem 1rem;
}

header {
  background-color: #d99;
}

nav {
  position: sticky;
  top: 2rem;
  background-color: #9d9;
}

main {
  height: 100vh;
  background-color: #99d;
}

<header>
Header
</header>
<nav>
  Navbar
</nav>
<main>
  Main
</main>

【讨论】：

【解决方案2】：

我不确定这是否能解决您的问题，但您可以尝试更改您的 useEffect，使其末尾有一个空的依赖项数组，以便在组件挂载时运行，如下所示：

useEffect(() => {
    window.addEventListener('scroll', handleScroll)
}, [])

【讨论】：

我不知道它是否解决了问题，但至少它消除了一些内存泄漏。您还可以在return 中添加window.removeEventListener，例如here，以在组件卸载时清理监听器。
它工作了一秒钟，但现在每当它切换到第二种样式时，导航栏就会闪烁/出现故障
我什至尝试使用 useLayoutEffect 并得到相同的闪烁
将滚动模式的css文件中的位置属性从固定更改为粘性，现在它可以在没有闪烁的情况下工作。