粘性导航栏 - 反应

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>
);
}
}

在我的应用程序中.js我只返回div 中的所有页面

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

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

Answer 1

react-scroll有一个Element类，你应该用元素包装你的组件

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

这是包含固定版本的临时沙盒