React Bootstrap - 位置粘性不起作用

Question

我正在使用 React Bootstrap 并且 class position-sticky 根本不起作用。各级都没有溢出。有什么提示吗？

Answer 1

我发现容器需要高度指定.

Adding height: 100% to the parent and top: 0 to the child fixes the issue.

原因是sticky规则使用父级的高度来计算自己的位置。

使用 React Bootstrap className h-100 可用于设置 height: 100%

我希望这对其他人也有帮助:)

Answer 2

<>
  <Navbar
    sticky="top"
    collapseOnSelect
    expand="lg"
    bg="primary"
    variant="dark"
  >
    <Container className="">
      <Navbar.Brand as={Link} to="/">
        <img height={"30px"} src={logo} alt="" />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="me-auto">
          <Nav.Link href="home#services">Services</Nav.Link>
          <Nav.Link href="home#experts">Experts</Nav.Link>
          <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">
              Another action
            </NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">
              Something
            </NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">
              Separated link
            </NavDropdown.Item>
          </NavDropdown>
        </Nav>
        <Nav>
          <Nav.Link as={Link} to="/about">
            About
          </Nav.Link>
          <Nav.Link as={Link} to="/login">
            Log In
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Container>
  </Navbar>
</>

React Bootstrap - 位置粘性不起作用

React Bootstrap - position sticky not working

css

sticky

reactjs

react-bootstrap