粘性导航栏-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中我只return一个div

中的所有页面

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

感谢任何类型的帮助或建议。我应该使用除 react-scoll 之外的任何其他东西吗？谢谢！

Answer 1

react-scroll 有一个 Element class，你应该用 Element

包装你的组件

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

这是包含固定版本

的临时sandbox

粘性导航栏-React

Sticky navigation bar -React

javascript

navigation

reactjs