コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > React JS でのナビゲーションを向上させるためのスティッキー ナビゲーションバーを作成するための完全ガイド

React JS でのナビゲーションを向上させるためのスティッキー ナビゲーションバーを作成するための完全ガイド

Mary-Kate Olsen
リリース： 2024-10-11 10:23:01
オリジナル
870 人が閲覧しました

Panduan Lengkap Membuat Sticky Navbar untuk Navigasi Lebih Baik Pada React JS

このセッションでは、Tailwind CSS と React JS を使用してスティッキー ナビゲーションバーを作成します。

React と Tailwind CSS のインストールプロセスは前の記事でご覧いただけます

すぐにナビゲーションバーのコードを作成してみましょう

Navbar 表示用の 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 中国語 Web サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：ブートストラップと追い風の統合: プロとコントロール |ブートストラップと追い風: 長所と短所 次の記事：Shadow DOM とそれをいつ使用するかを理解する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2226
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2372
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1980
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1868
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1938
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート