BootstrapVue：创建2个导航条，底部导航条贴在顶部吗？

Question

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

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

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

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

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

文档为导航栏提到placement。唯一的其他选项（除了fixed =“ top”之外）是将div的位置设置为在CSS中为粘滞状态：

position: sticky

但是，这只会在div内产生影响。由于我有多个组件，因此我不确定如何在Vue中正确实现此功能，因为我无法将一个组件的div继承到另一个组件。

我该怎么做？

Answer 1

我当时正在玩BootstrapVue的codeandbox。我只是把

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

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

并且能够复制该行为。