【问题标题】:navbar-fixed-top show content behind Navbarnavbar-fixed-top 在 Navbar 后面显示内容
【发布时间】:2022-02-03 19:04:41
【问题描述】:

滚动时如何防止内容漂浮在导航栏后面?

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

或者是在:

<Nav className="navigation"..

谢谢

【问题讨论】:

    标签: react-bootstrap


    【解决方案1】:

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

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

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

    【讨论】:

    • 这对我有用!添加 z-index 属性也会很有用,以防某些元素在标题上方滚动。
    • 即使在滚动后也可以通过导航栏修复。但是当我滚动时,图像在导航栏上重叠。这个问题有解决办法吗?
    • @akshayagashe 查找 z-index CSS 属性。
    【解决方案2】:

    正如Scrotch所说的添加:

    <Navbar style={{backgroundColor: "#071740", position: "sticky"}} variant="dark" fixed="top">
    

    对我有用,我是内联的,但放入单独的 CSS 文件也应该可以。这是迄今为止唯一对我有用的东西。

    注意:我正在使用"react-bootstrap": "^1.0.0-beta.16"

    【讨论】:

    • 将 fixed="top" 添加到导航栏对我有用。
    【解决方案3】:

    我也遇到了这个问题。我找到了以下(基线引导程序)page,它显示了一个固定的导航栏,并且主页正确地显示在它的下方。这似乎是他们正在使用的css 的功能。具体来说:

    padding-top: 70px;
    

    我加了

    body {
        padding-top: 70px;
    }
    

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

    【讨论】:

    • 这很好,只要您不需要响应。对于响应式设计,您必须动态确定导航栏高度并根据当前导航栏高度值调整padding-top
    • 我认为用媒体查询在 CSS 中处理这个比添加逻辑来反应代码恕我直言
    • @Manuel Hernandez 终于有人指出了正确的方向。
    【解决方案4】:

    为了获得响应式 padding-top 的 body 你可以使用 sth.像这样(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,
    };
    

    即使在移动视图中添加更多链接后,您的&lt;body&gt; padding-top 也将始终适合您的导航栏高度。 我还假设基础高度为 50px(请参阅构造函数),但只要您在 componentDidMount() 中调用 this.handleResize() 就没有关系。

    【讨论】:

      【解决方案5】:

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

      因此,在您的示例中,您可以指定 sticky-top 而不是 fixed-top 作为类名,它满足您的要求。

      【讨论】:

      【解决方案6】:

      我遇到了同样的问题。想要留在引导程序中并避免自定义 css,我尝试添加类 'position-sticky',这给了我一个左移导航栏。显然,无论出于何种原因,导航栏都有一个负填充,因此将“ps-0”添加到类列表中修复了它。

      <Navbar 
          fixed={'top'}
          className={'position-sticky ps-0'}
      >
      

      【讨论】:

        猜你喜欢
        • 2013-11-13
        • 1970-01-01
        • 2013-07-06
        • 1970-01-01
        • 2022-10-12
        • 1970-01-01
        • 2017-04-12
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多