粘性導航欄 -React

Question

我目前正在制作一個投資組合。 我想在頂部有一個導航欄。 單擊導航欄上的選項卡后，它將向下滾動到該特定頁面，導航欄將停留在頂部。 我目前正在使用反應滾動。 但是，我需要有關如何在向下滾動時將導航欄固定在頂部的建議。 現在，我的代碼看起來像這樣：

import { Link} from "react-scroll";
class Navbar extends Component {
  render() {
    return (
      <section id="nav-bar">
        <nav className="navbar navbar-default navbar-fixed-top">
          <div className="navbar">
            <ul
            >
              <li>
                <Link
                  activeClass="active"
                  to="home"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Home
                </Link>
              </li>
              <li>
                <Link
                  activeClass="active"
                  to="demo"
                  spy={true}
                  smooth={true}
                  offset={0}
                  duration={500}
                >
                  Demo
                </Link>
              </li>
              <li>
                <Link
                  activeClass="active"
                  to="process"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Process
                </Link>
              </li>
            </ul>
          </div>
        </nav>
      </section>
    );
  }
}

在我的 App.js 中，我只返回一個 div 中的所有頁面

      <div>
        <Navbar />
        <HomePage />
        <DemoPage />
        <ProcessPage />
      </div>

將不勝感激任何類型的幫助或建議。 我應該使用 react-scoll 以外的任何東西嗎？。 謝謝！

Answer 1

react-scroll有一個Element類，你應該用 Element 包裹你的組件

<Element name="home">
          <HomePage />
        </Element>

這是包含固定版本的臨時沙箱