粘性导航栏UI

Question

如何使用this程序包实现以下UI？ 两个导航栏都是固定的。任何人都可以阐明它吗？ 此代码仅显示一个导航栏固定顶部。

PARFILE

  

请注意，如果我添加另一个<Navbar style={{ backgroundColor: "#ffffffa8" }} fixed="top" active={this.state.active} > <Navbar.Brand> <Navbar.Item renderAs="a" href="/"> <img src="images/dv.png" alt="Dew Ventures" /> </Navbar.Item> <Navbar.Burger active={this.state.active} onClick={this.handleClick} /> </Navbar.Brand> <Navbar.Menu active={this.state.active}> <Navbar.Container position={"end"}> <Navbar.Item href="/">Home</Navbar.Item> <Navbar.Item href="/products">Products</Navbar.Item> <Navbar.Item href="/about"> About Us</Navbar.Item> <Navbar.Item href="/contact"> Contact Us</Navbar.Item> </Navbar.Container> </Navbar.Menu> </Navbar> ，它将与   当前的Navbar不会产生任何结果。

Answer 1

我从未使用过react-bulma-components，但是在快速浏览一下代码之后，我认为您可以尝试在Navbar元素上添加一些CSS属性来按下第二个Navbar。像这个例子：

<Navbar fixed="top" style={{height: 30}}>
   ... some code
</Navbar>
<Navbar fixed="top" style={{top: 30}}>
   ... some code
</Navbar>

或者，删除固定的道具，并在第二个导航栏上的样式道具上添加“ position：fixed”。像这样：

<Navbar fixed="top">
   ... your code
</Navbar>
<Navbar style={{position: 'fixed', top: 'the-pixel-height-of-the-first-navbar'}}>
   ... more code
</Navbar>

我希望这会对您有所帮助。