Question

滚动时如何防止内容浮动在Navbar后面？

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

或是否在：

<Nav className="navigation"..

由于

Answer 1

为了获得身体的响应性填充，你可以使用......像这样（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>填充顶部也始终适合您的导航栏高度。我还假设基本高度 50px （请参阅构造函数），但只要您在this.handleResize()中调用componentDidMount()，就无所谓了。

Answer 2

我也遇到了这个问题。我发现以下（基线引导程序）page显示了一个固定的导航栏并且主页面正确地显示在它下面。它似乎是他们正在使用的css的函数。具体做法是：

+ (NSDate *)stringDateToDate:(NSString *)aStringDate
{
    NSDate *date = nil;

    NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
    [dateFormat setDateFormat:@"yyyy-MM-dd'T'HH:mm:ss:SSS"];

    date = [dateFormat dateFromString:aStringDate];
    NSLog(@"nsdate: %@", date);

    return date;
}

我添加了

padding-top: 70px;

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

Answer 3

我喜欢jmarceli的答案，但这是一个更简单的方法：

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

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

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

Answer 4

还可以选择指定 sticky-top，它基本上实现了其他人建议的使用 position:sticky 的解决方案 (see documentation)。

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

navbar-fixed-top显示Navbar背后的内容

4 个答案: