在 React JS 中创建粘性导航栏以实现更好导航的完整指南

在本次会议中，我们将使用 Tailwind CSS 和 React JS 创建一个粘性导航栏。

React 和 Tailwind CSS 的安装过程可以参见上一篇文章

让我们立即创建导航栏的代码

为导航栏显示创建 HTML

<React.Fragment>
      <nav className={`fixed inset-x-0 top-0 z-50 flex items-center justify-center h-[60px] py-3 [&.is-sticky]:bg-white  border-b border-slate-200  [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-slate-200/25 navba ${navClass}`} id="navbar">
        <div className="container 2xl:max-w-[90rem] px-4 mx-auto flex items-center self-center w-full">
          <div className="mx-auto">
            <ul id="navbar7" className={`absolute inset-x-0 z-20 items-center py-3 bg-white shadow-lg dark:bg-zink-600 dark:md:bg-transparent md:z-0 navbar-menu rounded-b-md md:shadow-none md:flex top-full ltr:ml-auto rtl:mr-auto md:relative md:bg-transparent md:rounded-none md:top-auto md:py-0`}>
              <li>
                <a href="#home"
                  className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Home" ? "active" : ""}`}
                  onClick={() => handleLinkClick("/Home")}
                >
                  Home</a>
              </li>
              <li>
                <a href="#features"
                  className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Features" ? "active" : ""}`}
                  onClick={() => handleLinkClick("/Features")}
                >
                  Layanan Kami</a>
              </li>
            </ul>
          </div>

        </div>
      </nav>
      <section className="relative mt-[60px] h-[800px] bg-yellow-600" id="home">
        <div className="flex items-center justify-center h-full">
          HOME
        </div>
        </section>
      <section className="relative h-[800px] bg-green-600" id="features">
        <div className="flex items-center justify-center h-full">
          FEATURES
        </div>
      </section>
    </React.Fragment>

滚动功能

此功能用于将导航栏的状态更改为粘性，同时还添加平滑的动画，以便页面切换过程良好

  const [navClass, setNavClass] = React.useState<string>('');

  const scrollNavigation = () => {
    var scrollUp = document.documentElement.scrollTop;
    if (scrollUp >= 50) {
      setNavClass('is-sticky');
    } else {
      setNavClass('');
    }
  };


  React.useEffect(() => {
    window.addEventListener('scroll', scrollNavigation, true);
    document.documentElement.classList.add("overflow-x-hidden", "scroll-smooth", "group");

    return () => {
      window.removeEventListener('scroll', scrollNavigation, true);
      document.documentElement.classList.remove("overflow-x-hidden", "scroll-smooth", "group");

    };
  }, []);

设置活动菜单功能

此函数用于更改菜单中的活动类，并根据正在访问的菜单来引导页面

  const [activeLink, setActiveLink] = React.useState<string>("/Home");
  const handleLinkClick = (target: string) => {
    setActiveLink(target);
  };

完整的脚本如下

import React from "react"

function App() {



  const [navClass, setNavClass] = React.useState<string>('');

  const scrollNavigation = () => {
    var scrollUp = document.documentElement.scrollTop;
    if (scrollUp >= 50) {
      setNavClass('is-sticky');
    } else {
      setNavClass('');
    }
  };


  React.useEffect(() => {
    window.addEventListener('scroll', scrollNavigation, true);
    document.documentElement.classList.add("overflow-x-hidden", "scroll-smooth", "group");

    return () => {
      window.removeEventListener('scroll', scrollNavigation, true);
      document.documentElement.classList.remove("overflow-x-hidden", "scroll-smooth", "group");

    };
  }, []);



  const [activeLink, setActiveLink] = React.useState<string>("/Home");
  const handleLinkClick = (target: string) => {
    setActiveLink(target);
  };



  return (
    <React.Fragment>
      <nav className={`fixed inset-x-0 top-0 z-50 flex items-center justify-center h-[60px] py-3 [&.is-sticky]:bg-white  border-b border-slate-200  [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-slate-200/25 navba ${navClass}`} id="navbar">
        <div className="container 2xl:max-w-[90rem] px-4 mx-auto flex items-center self-center w-full">
          <div className="mx-auto">
            <ul id="navbar7" className={`absolute inset-x-0 z-20 items-center py-3 bg-white shadow-lg dark:bg-zink-600 dark:md:bg-transparent md:z-0 navbar-menu rounded-b-md md:shadow-none md:flex top-full ltr:ml-auto rtl:mr-auto md:relative md:bg-transparent md:rounded-none md:top-auto md:py-0`}>
              <li>
                <a href="#home"
                  className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Home" ? "active" : ""}`}
                  onClick={() => handleLinkClick("/Home")}
                >
                  Home</a>
              </li>
              <li>
                <a href="#features"
                  className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Features" ? "active" : ""}`}
                  onClick={() => handleLinkClick("/Features")}
                >
                  Layanan Kami</a>
              </li>
            </ul>
          </div>

        </div>
      </nav>
      <section className="relative mt-[60px] h-[800px] bg-yellow-600" id="home">
        <div className="flex items-center justify-center h-full">
          HOME
        </div>
        </section>
      <section className="relative h-[800px] bg-green-600" id="features">
        <div className="flex items-center justify-center h-full">
          FEATURES
        </div>
      </section>
    </React.Fragment>
  )
}

export default App

以上是在 React JS 中创建粘性导航栏以实现更好导航的完整指南的详细内容。更多信息请关注PHP中文网其他相关文章！