9

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

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

或者它在：

<Nav className="navigation"..

谢谢

4

6 回答 6

14

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

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

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

于 2018-07-04T03:08:49.700 回答
5

As Scrotch said adding:

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

worked for me, I did it inline but putting in a separate CSS file should work as well. This is the only thing that's worked so far for me.

NB: I'm using "react-bootstrap": "^1.0.0-beta.16"

于 2020-01-20T12:42:05.250 回答
3

我也遇到了这个。我发现以下（基线引导）页面显示了一个固定的导航栏，并在其下方正确显示了主页。这似乎是他们正在使用的css的一个功能。具体来说：

padding-top: 70px;

我添加了

body {
    padding-top: 70px;
}

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

于 2015-09-27T13:34:54.043 回答
2

为了获得响应的 padding-top 身体，你可以使用 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 （请参阅构造函数） ，但只要您调用this.handleResize().componentDidMount()

于 2016-06-29T16:14:27.690 回答
1

还可以选择指定sticky-top哪个基本上实现了position:sticky其他人建议的使用解决方案（请参阅文档）。

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

于 2021-04-02T16:07:25.697 回答
0

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

<Navbar 
    fixed={'top'}
    className={'position-sticky ps-0'}
>
于 2022-02-03T11:04:41.823 回答