Question

我有一个导航栏Bootstrap 4，上面有一个标题。我希望标题在滚动时消失，但导航栏会粘到顶部。

我已经在我的functions.php中加入了Jquery。

这是我的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，并更改＆＃39; position＆＃39;的值。来自＆＃39; sticky＆＃39;的元素的CSS修复＆＃39;一旦用户滚动到顶部。

然而，元素并不坚持，CSS不会改变。我做错了什么？

Answer 1

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

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

https://codepen.io/anon/pen/QxvJym

包含上述内容的Bootstrap导航栏不会粘贴

1 个答案: