如何在反应中的滚动上创建粘性导航栏

Question

我正在尝试在用户向下滚动时向网站的导航栏添加粘性导航栏效果。即当浏览器向下滚动一定高度时，我希望导航栏固定在页面顶部

我正在尝试用反应钩子来实现这个。这是导航栏的代码

导航栏.js

   import { useEffect, useState } from "react";

    const NavBar = () => {
    // sticky nav
    const [stickyClass, setStickyClass] = useState("");

    function stickNavbar() {
        let windowHeight = window.scrollY;
        setStickyClass("sticky-nav") ? windowHeight > 500 : setStickyClass("");
    }

    useEffect(() => {
        window.addEventListener("scroll", stickNavbar);
    }, []);

return (
        <nav className="relative w-full p-4">
            <div className={`flex w-full flex-row items-center justify-between ${stickyClass}`}>
             navbar content goes here ....
            <div/>
<nav/>

我使用 tailwindcss 进行样式设置，因此没有外部样式表，但是该类sticky-nav应用了 tailwindcss 的一些实用程序类。

组件.css

/* Navbar */
.sticky-nav {
    @apply fixed top-0 left-0 w-full shadow-md z-20;
}

我在网上进行了研究，但没有发现真正有帮助的结果，真的希望有人能在这里帮助我:)。

Answer 1

尝试这个 ：

import React, { useState, useEffect } from 'react';

export default function Navbar() {
  const [stickyClass, setStickyClass] = useState('relative');

  useEffect(() => {
    window.addEventListener('scroll', stickNavbar);

    return () => {
      window.removeEventListener('scroll', stickNavbar);
    };
  }, []);

  const stickNavbar = () => {
    if (window !== undefined) {
      let windowHeight = window.scrollY;
      windowHeight > 500 ? setStickyClass('fixed top-0 left-0 z-50') : setStickyClass('relative');
    }
  };

  return <div className={`h-16 w-full bg-gray-200 ${stickyClass}`}>Navbar</div>;
}

演示（没有 Tailwinds，但结果相同）： Stackblitz