导航栏固定顶部显示导航栏后面的内容 [英] 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}>

或者是在:

<Nav className="navigation"..

谢谢

推荐答案

我喜欢 jmarceli 的回答，但这里是更简单的方法:

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

将自定义类添加到您的 navbar 组件，例如 sticky-nav.在其上定义以下 CSS 属性:

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

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

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

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.

这篇关于导航栏固定顶部显示导航栏后面的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！