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

Question

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

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

我很困惑如何实现这一点。我能做到：

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

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

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

position: sticky

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

我该怎么做呢？

Answer 1

我在玩 BootstrapVue 代码盒。我只是放了

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

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

并且能够复制该行为。

编辑：

Link如果你想看的话。