navbar-fixed-top show content behind Navbar

问题

How do you prevent the content from floating behind the Navbar when scrolling?

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

Or is it in:

<Nav className="navigation"..

Thanks

回答1:

I like jmarceli's answer, but here's a simpler approach:

Add a custom class to your navbar component, say, sticky-nav. Define the following CSS properties on it:

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

This will make your navbar stick to the top and will automatically adjust the height of its following DOM elements. You can read more about the sticky property on MDN.

回答2:

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"

回答3:

I was running into this too. I found the following (baseline bootstrap) page that shows a fixed navbar and has the main page showing up properly below it. It seems to be a function of the css that they are using. Specifically:

padding-top: 70px;

I added

body {
    padding-top: 70px;
}

to my css file, and it seems to be working. Obviously mileage may vary, not applicable in all territories, etc. I am going to need to test it further for myself, but that might get you started.

回答4:

In order to get responsive padding-top for body you may use sth. like this (ES6 example):

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,
};

This way your <body> padding-top will always fit your navbar height even after adding more links in mobile view. I also assume that base height is 50px (see the constructor) but it shouldn't matter as long as you call this.handleResize() in componentDidMount().

来源：https://stackoverflow.com/questions/32332656/navbar-fixed-top-show-content-behind-navbar

标签

react-bootstrap