Question

我目前正在制作投资组合。我想在顶部有一个导航栏。单击导航栏上的选项卡后，它将向下滚动到该特定页面，并且导航栏将停留在顶部。我目前正在使用react-scroll。但是，我需要有关如何使导航栏在向下滚动时停留在顶部的建议。现在，我的代码看起来像这样：

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>

这是包含固定版本的临时sandbox

粘性导航栏-反应

1 个答案: