上面内容的Bootstrap导航栏不粘

我有一个navbar Bootstrap 4, 其上方有一个标题。我希望页眉在滚动时消失, 但导航栏粘在顶部。

我已经将Jquery放入了我的functions.php中。

这是我的CSS, 在style.css中：

.navbar {position:sticky;}

这是我的脚本, 位于header.php中：

<script>
var $sticknav = $('.navbar');
$(document).scroll(function() {
    $sticknav.css({position: $(this).scrollTop()>0 ? "sticky":"fixed"});
});</script>

据我了解, 这是针对.navbar的, 一旦用户滚动到顶部, 该元素在CSS中的”位置”值将从”粘滞”更改为”固定”。

但是, 元素不会粘住, CSS不会更改。我究竟做错了什么？

#1

我相信你需要交换CSS规则。

<script>
var $sticknav = $('.navbar');
$(document).scroll(function() {
    $sticknav.css({position: $(this).scrollTop()>0 ? "fixed":"sticky"});
});</script>