我一直在尝试通过使用CSS和Javascript切换类来动画化我使用Bootstrap4创建的导航栏。但是无论如何,该脚本似乎根本不起作用。我在下面添加了必要的代码段:
HTML
<!--NAVBAR-->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark ">
<a class="navbar-brand ml-4 mt-3px-4" href="#">MR BLUE. </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-right" id="navbarSupportedContent">
<ul class="navbar-nav pr-5 ml-auto mt-3">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
....so on
<!--NAVBAR-->
2. CSS类
.bg-dark{
background: transparent !important;
}
.bg-dark.scrolled{
transition: 750 ease;
background: #000000!important;
}
<script>
$(window).scroll(function(){
$('nav').toggleClass('scrolled',$(this).scrollTop>1080);
});
</script>
导航栏保持透明。有关此问题的任何帮助将不胜感激。
答案 0 :(得分:0)
scrollTop是一个函数。当我添加括号时,它对我有用
$(window).scroll(function(){
$('nav').toggleClass('scrolled',$(this).scrollTop()>1080);
});
您在CSS中的转换缺少时间单位。 750是什么?秒?毫秒?
用s
表示秒,用ms
表示毫秒。