粘性Navbar在组件中使用时在bootstrap-vue中不起作用

Question

我正在使用bootstrap-vue，正如您在jsfiddle中看到的那样，当在navbar中使用时，sticky属性可以正常工作。

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

<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可以达到目的：

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

您可能想检查一下如何使css在chrome以外的其他浏览器上运行。

Answer 2

并非所有Web浏览器都支持CSS position: sticky。使用最新的Chrome，尽管如此，您的小提琴还是对我有用。

Answer 3

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

你可以使用已经存在于 bootstrap.css 中的类 fixed-top