navbar-fixed-top 在 Navbar 后面显示内容答案

【问题标题】：navbar-fixed-top show content behind Navbarnavbar-fixed-top 在 Navbar 后面显示内容
【发布时间】：2022-02-03 19:04:41
【问题描述】：

滚动时如何防止内容漂浮在导航栏后面？

<Navbar className="navbar-form navbar-fixed-top" responsive collapseable brand='x' inverse toggleNavKey={1} onClick={this.handleMouseDown}>

或者是在：

<Nav className="navigation"..

谢谢

【问题讨论】：

标签： react-bootstrap

【解决方案1】：

为您的navbar 组件添加一个自定义类，例如sticky-nav。在其上定义以下 CSS 属性：

.sticky-nav {
  position: sticky;
  top: 0;
}

这将使您的导航栏固定在顶部，并自动调整其后续 DOM 元素的高度。您可以在MDN 上阅读有关sticky 属性的更多信息。

【讨论】：

这对我有用！添加 z-index 属性也会很有用，以防某些元素在标题上方滚动。
即使在滚动后也可以通过导航栏修复。但是当我滚动时，图像在导航栏上重叠。这个问题有解决办法吗？
@akshayagashe 查找 z-index CSS 属性。

【解决方案2】：

正如Scrotch所说的添加：

<Navbar style={{backgroundColor: "#071740", position: "sticky"}} variant="dark" fixed="top">

对我有用，我是内联的，但放入单独的 CSS 文件也应该可以。这是迄今为止唯一对我有用的东西。

注意：我正在使用"react-bootstrap": "^1.0.0-beta.16"

【讨论】：

将 fixed="top" 添加到导航栏对我有用。

【解决方案3】：

我也遇到了这个问题。我找到了以下（基线引导程序）page，它显示了一个固定的导航栏，并且主页正确地显示在它的下方。这似乎是他们正在使用的css 的功能。具体来说：

padding-top: 70px;

我加了

body {
    padding-top: 70px;
}

到我的 css 文件，它似乎正在工作。显然，里程可能会有所不同，并不适用于所有地区，等等。我需要自己进一步测试，但这可能会让你开始。

【讨论】：

这很好，只要您不需要响应。对于响应式设计，您必须动态确定导航栏高度并根据当前导航栏高度值调整padding-top。
我认为用媒体查询在 CSS 中处理这个比添加逻辑来反应代码恕我直言
@Manuel Hernandez 终于有人指出了正确的方向。

【解决方案4】：

为了获得响应式 padding-top 的 body 你可以使用 sth.像这样（ES6 示例）：

import ReactDOM from 'react-dom';
import React from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';

export default class Template extends React.Component {
  constructor(props) {
    super(props);
    this.state = { navHeight: 50 };

    this.handleResize = this.handleResize.bind(this);
  }

  handleResize(e = null) {
    this.setState({ navHeight: ReactDOM.findDOMNode(this._navbar).offsetHeight });
  }

  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  render() {
    return (
      <body style={{paddingTop: this.state.navHeight}}>
        <Navbar ref={(e) => this._navbar = e} fixedTop>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Some title</Link>
            </Navbar.Brand>
          </Navbar.Header>
          <Nav>
            <NavItem eventKey={1} href="/link1">Link1</NavItem>
            <NavItem eventKey={2} href="/link2">Link2</NavItem>
          </Nav>
        </Navbar>
        <main>
          {this.props.children}
        </main>
      </body>
    );
  }
}

Template.propTypes = {
  navHeight: React.PropTypes.number,
  children: React.PropTypes.object,
};

即使在移动视图中添加更多链接后，您的<body> padding-top 也将始终适合您的导航栏高度。我还假设基础高度为 50px（请参阅构造函数），但只要您在 componentDidMount() 中调用 this.handleResize() 就没有关系。

【讨论】：

【解决方案5】：

还有指定sticky-top的选项，它基本上实现了其他人建议的使用position:sticky的解决方案（see documentation）。

因此，在您的示例中，您可以指定 sticky-top 而不是 fixed-top 作为类名，它满足您的要求。

【讨论】：

这是最好的答案。 React Bootstrap 文档：react-bootstrap.github.io/components/navbar/#navbars-placement

【解决方案6】：

我遇到了同样的问题。想要留在引导程序中并避免自定义 css，我尝试添加类 'position-sticky'，这给了我一个左移导航栏。显然，无论出于何种原因，导航栏都有一个负填充，因此将“ps-0”添加到类列表中修复了它。

<Navbar 
    fixed={'top'}
    className={'position-sticky ps-0'}
>

【讨论】：