BootstrapVue：创建 2 个导航栏，底部导航栏粘在顶部？

Question

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

可以在 Reason.com 上找到这种行为的一个很好的例子： 链接

我对如何实现这一点感到非常困惑。 我可以：

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

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

文档提到了导航栏的位置。 唯一的其他选项（除了 fixed="top"）是在 css 中将 div 的位置设置为粘性：

position: sticky

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

我该怎么做呢？

Answer 1

我在玩 BootstrapVue 代码和盒子。 我只是把

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

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

并且能够复制这种行为。

编辑：

想看的话给个链接。