在组件中使用时，粘性导航栏在 bootstrap-vue 中不起作用

Question

我正在使用 bootstrap-vue，正如您在 jsfiddle 中看到的那样，粘性属性在导航栏中使用时可以正常工作。

问题是当我将此导航栏移动到单独的组件并调用它时，粘性属性无法正常工作。

<b-navbar toggleable="lg" type="dark" variant="info" sticky>
   <b-navbar-brand href="#">NavBar</b-navbar-brand>      
</b-navbar>

fixed="top" 在用作 组件时仍然有效 .

<b-navbar toggleable="lg" type="dark" variant="info" fixed="top">
   <b-navbar-brand href="#">NavBar</b-navbar-brand>      
</b-navbar>

Answer 1

CSS position: sticky 并非所有网络浏览器都支持。不过，使用最新的 Chrome，你的 fiddle 对我有用。

Answer 2

我刚遇到同样的问题。这不是由于浏览器不兼容的东西。我的导航栏被包裹在另一个逻辑组件中，粘性在那里不起作用。

将以下 css 添加到包装组件中就可以了：

.wrapper {
  position: sticky;
  top: 0;
}

您可能想检查如何让 css 在 chrome 以外的其他浏览器上工作。

Answer 3

<div class="fixed-top"><b-navbar></b-navbar></div>

您可以使用 bootstrap.css

中已有的 class 固定顶

Sticky Navbar doesn't work in bootstrap-vue when using in a component