我正在使用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>
发布于 2019-05-14 07:56:50
并非所有web浏览器都支持CSS position: sticky
。不过,使用最新的Chrome浏览器,你的小提琴对我来说还是不错的。
发布于 2020-02-24 02:12:07
我刚刚遇到了同样的问题。这并不是因为浏览器不兼容的问题。我的导航栏被包装在另一个逻辑组件中,sticky在那里不起作用。
将下面的css添加到包装组件就成功了:
.wrapper {
position: sticky;
top: 0;
}
您可能需要检查一下如何让css在除chrome之外的其他浏览器上工作。
发布于 2021-07-11 16:13:30
<div class="fixed-top"><b-navbar></b-navbar></div>
您可以使用bootstrap.css中已经存在的类fixed-top
https://stackoverflow.com/questions/54732031
复制相似问题