html - BootstrapVue : Creating 2 Navbars with Bottom Navbar that Sticks to the Top?

Question

我想做的是创建 2 个导航栏。第一个(顶部导航栏)只是一个品牌( Logo )。第二个(底部导航栏)是导航菜单。当用户向下滚动时，我希望顶部导航栏滚动出屏幕，但我希望第二个(底部)导航栏保持固定在屏幕顶部。我已将每个导航栏设置为单独的组件。

可以在 Reason.com 上找到此行为的一个很好的示例:link

我对如何实现这个感到非常困惑。我能做到:

<b-navbar toggleable="lg" class="header" fixed="top">

使导航栏停留在屏幕顶部。如果我希望第一个导航栏保持在顶部而不是第二个，这很有效。但是，它不适用于我的情况。

文档提到 placement对于导航栏。唯一的其他选项(除了固定=“顶部”)是在CSS中将div的位置设置为粘性:

position: sticky

但是，这只会影响 div 内的内容。由于我有多个组件，我不确定如何在 Vue 中正确实现这一点，因为我无法将一个 div 从一个组件转移到另一个组件。

我该如何去做呢？

Answer 1

我正在玩 BootstrapVue Codesandbox。我只是把

<b-navbar>
....
</b-navbar>

<b-navbar sticky>
....
</b-navbar>

并且能够复制这种行为。

编辑:

Link如果你想看的话。