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>

並且能夠復制這種行為。

編輯：

想看的話給個鏈接。