navbar-fixed-top show-Inhalte hinter der Navbar

Wie verhindern Sie, dass die Inhalte aus schwebenden hinter die Navigationsleiste beim scrollen?

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

Oder ist es:

<Nav className="navigation"..

Dank

InformationsquelleAutor Chris G. | 2015-09-01
  1. 2

    Um sich reaktionsschnell Weg padding-top für den Körper, die Sie verwenden können sth. wie diese (ES6 Beispiel):

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

    Diese Weise Ihre <body> padding-top-immer passend zu Ihrem navbar Höhe, sogar nach dem hinzufügen von mehr links in der mobilen Ansicht.
    Ausserdem gehe ich davon aus, dass die Sockelhöhe ist 50px (siehe Konstruktor), aber es sollte keine Rolle spielen, solange Sie Sie nennen this.handleResize() im componentDidMount().

    InformationsquelleAutor jmarceli
  2. 2

    Ich mag jmarceli's Antwort, aber hier ist ein einfacher Ansatz:

    Fügen Sie eine benutzerdefinierte Klasse, um Ihre navbar Komponente, sagen wir, sticky-nav. Definieren Sie die folgenden CSS-Eigenschaften: 

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

    Dadurch wird Ihr navbar-stick an die Spitze und wird automatisch passen Sie die Höhe der folgenden DOM-Elemente. Lesen Sie mehr über die sticky Eigenschaft auf MDN.

    • Das hat für mich! auch das hinzufügen einer z-index-Eigenschaft wäre nützlich, für den Fall das einige Elemente scrollen über den Kopf.
    InformationsquelleAutor Scrotch
  3. 1

    Ich lief in diese zu. Ich fand die folgenden (Basis bootstrap) Seite, die zeigt, dass eine Feste Navigationsleiste und hat die main-Seite mit richtig darunter. Es scheint eine Funktion der css, die Sie verwenden. Speziell:

    padding-top: 70px;

    Fügte ich

    body {
    padding-top: 70px;
}

    meiner css-Datei, und es scheint zu funktionieren. Offensichtlich Laufleistung variieren kann, gilt nicht in allen Gebieten, usw. Ich bin gehen zu müssen, um es zu testen weiter für mich, aber vielleicht kann Sie loslegen.

    • Das ist schön, solange Sie nicht brauchen, Reaktionsfähigkeit. Für eine ansprechende Gestaltung, die Sie haben, um zu bestimmen, Navbar Höhe dynamisch anpassen padding-top nach aktuellen Navbar Höhe.
    • Ich denke der Umgang mit diesem in der CSS mit media queries ist sauberer als das hinzufügen von Logik zu reagieren-code IMHO
    InformationsquelleAutor aperkins
Schreibe einen Kommentar