导航栏不粘在顶部

Question

我使用 react-boostrap 导航栏来创建我的应用程序。我希望这个导航栏保持在顶部（这样当用户滚动时，导航栏总是在他的屏幕顶部）。

我查看了 documentation 的位置，将 sticky = top 添加到我们的 <Navbar> 应该可以完成工作，但事实并非如此：

import React from 'react'
import {Link} from 'react-router-dom'

import 'bootstrap/dist/css/bootstrap.min.css';
import {Navbar} from 'react-bootstrap'
import {Container} from "reactstrap";

const Header = () => {
  return (
    <>
      <Container className="">
        <Navbar id="navbar"  sticky="top" expand="md" bg="primary" variant="dark" >
          <Navbar.Brand href="/">The movies warehouse</Navbar.Brand>
        </Navbar>
      </Container>

    </>
  )
}

export default Header;

在 CSS 文件中，我做了以下更改：

/* nav bar */
#navbar {
    background-color: rgb(10, 4, 22) !important;
    transition: all 0.3s ease-out 0s !important;
    box-shadow: 0px 10px 10px 0px rgba(9, 5, 29, 0.171) !important;
    font-size: 18px !important;
}

我做错了什么？因为实际上导航栏位于页面顶部，但我希望它位于屏幕顶部。

Answer 1

在CSS中，设置position : fixed;然后你可以把它放在你想要的地方，例如top : 0;把它贴在上面

Answer 2

此处不需要固定位置。您应该在最上面的组件中导入 Header/Navbar，该组件负责应用程序的整体布局。在大多数情况下，它是 App.js:

https://codesandbox.io/s/mystifying-perlman-r27big

如果你这样做，就像它的 position: fixed with top:0，因为它上面没有其他组件。

顺便说一句：您的 sticky="top" 已经添加了以下 css 规则：

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

导航栏不粘在顶部

Navbar doesn't stick to the top

navbar

reactjs

react-bootstrap