如何在React-bootstrap中有一个Navbar固定在顶部，而不是小视口上？

Question

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

我现在有一个透明的Navbar，使用一个事件监听器，设置它，这样当你向下滚动时，就会出现Navbar的背景，并且当你向下滚动时Navbar会停留在屏幕的顶部。这只在我有 的情况下才起作用，在我切换到一个较小的视区，在那里我的Navbar变成了一个汉堡菜单之前，这是很好的。如果我在里面有fixed=“top”，当你打开汉堡菜单时，它会扩展到我在它下面页面上的任何文本，而不是向下推它，为Navbar链接腾出空间。

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

有没有人对我如何让这两个都能工作有什么想法？如果你需要看任何代码，请告诉我。

Answer 1

我建议使用css将navbar设置为Fixed。根据目标屏幕大小使用媒体查询操作固定状态。

您可以使用此css作为指南。

.css文件

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

.html文件

<navbar className="my-navbar">

希望能有所帮助！

干杯！