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

Posted 2023-02-22

【中文标题】BootstrapVue：创建 2 个底部导航栏粘在顶部的导航栏？

【英文标题】：BootstrapVue: Creating 2 Navbars with Bottom Navbar that Sticks to the Top?

【发布时间】：2020-07-08 17:15:20

【问题描述】：

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

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

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

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

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

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

position: sticky

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

我该怎么做呢？

【参考方案1】：

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

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

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

并且能够复制该行为。

编辑：

Link如果你想看的话。

【讨论】：

我的行为不同，但也许我只需要进行不同的设置。我将每个导航栏作为一个单独的组件。在 app.vue 中，我有一个包含所有组件的类“容器”的 div。也许我应该设置它，以便导航栏像您的示例一样位于 app.vue 中，然后从那里开始工作。

好的，现在可以了。谢谢！认为我只是通过将导航栏分开组件使其过于复杂。看到你的模板帮了很多忙！