javascript - 使用 React Nextjs 的粘性导航栏

Question

我正在尝试使用 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;

Answer 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>