react-bootstrap - navbar-fixed-top ナビゲーションバーの後ろにコンテンツを表示

Question

スクロール時にコンテンツが Navbar の後ろに浮かないようにするにはどうすればよいですか?

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

または、次の場所にあります。

<Nav className="navigation"..

ありがとう

Answer 1

navbarたとえば、コンポーネントにカスタム クラスを追加しますsticky-nav。次の CSS プロパティを定義します。

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

これにより、ナビゲーション バーが上部に固定され、後続の DOM 要素の高さが自動的に調整されます。stickyプロパティの詳細については、 MDNを参照してください。