如何在React-bootstrap中将导航栏固定在顶部，而不是固定在小视口上？

Question

我是Bootstrap（和react-bootstrap）的新手，所以遇到了一些麻烦。

因此，我现在有一个透明的导航栏，并使用事件侦听器进行设置，以便在向下滚动时，会显示导航栏的背景，并且在向下滚动时，导航栏会停留在屏幕顶部。仅当我有<Navbar fixed="top">时，此方法才有效，这很好，直到我更改为较小的视口，在该视口中，Navbar变成了汉堡菜单。如果我在那里fixed="top"，那么当您打开汉堡菜单时，它会扩展到我在其下方页面上显示的任何文本，而不是向下推并为Navbar链接腾出空间。

如果我从Navbar中删除fixed="top"，则汉堡包菜单可以正常工作，但是当我向下滚动时，Navbar不会停留在页面顶部。我将包括截图来演示这一点。

有人对我如何使两者都能起作用有任何想法吗？如果您需要查看任何代码，请告诉我。

在<Navbar fixed="top">和汉堡菜单扩展的情况下，“关于”，“项目”和“经验”会出现在以下内容中：

如果没有<Navbar fixed="top">，它可以正常工作，但是当我向下滚动时，导航栏不会停留在屏幕顶部：

Answer 1

我建议使用CSS将导航栏设置为固定。根据目标屏幕尺寸，使用媒体查询来操纵固定状态。

您可以使用此CSS作为指导。

.css文件

@media (min-width: 700px) {
 .my-navbar {
  position: fixed;
 }
}

.html文件

<navbar class="my-navbar">

希望这会有所帮助！

干杯！